How to Create SVG Loading Animations using Adobe Illustrator and Adobe Edge Animate CC

Keeping your viewers glued to your webpage while it loads is like trying to stop a time bomb, except that it doesn’t blow people into tiny bits. Some web designers give special attention by providing users with some entertainment while the all the information they want to see are still waiting to be fully loaded like this tutorial on how to create SVG loading animations using Illustrator and Adobe Edge Animate CC.


There are a lot of loading animations out there. Sure, you can copy and paste these animations to your designs every now and then, right? Yeah, making use of templates are easier and more convenient. But there are times you need to do your own for learning’s sake.

This tutorial won’t require coding, so for those designers who don’t want to get their hands dirty with codes, here’s a great tool for you.

Why you should  choose SVG as a file format for all the images:

  • They are resolution independent.
  • Can be used together with CSS.
  • They are lighter than JPEG.
  • They can be easily edited.

Now, I would not keep you waiting, here’s the tutorial!


Aside from loading animations, you can also create the following using Illustrator and Edge Animate:

  • Interactive Graphics
  • Header Animations
  • Google-like Doodles


Learning SVG animation can be difficult for some, but with the use of tools like Illustrator and Edge Animate, it can be easier and faster. The only thing you need is to be patient and creative.

I hope you learned something today! There are more of these tutorials to come so keep your tabs open for 1stwebdesigner! Good luck!

Do you have questions about the process we just followed? Feel free to ask us at the comments section below.


Rudolph Musngi

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. He loves to read interesting internet stuff. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now