1. Technology

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.


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

Recent Articles

Good Reads


Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]


Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]