Adobe Tutorials Adobe Illustrator Create a SVG Loading Animation with Adobe Illustrator

Create a SVG Loading Animation with Adobe Illustrator

– Design + Code a Professional Android App from Scratch
**Join DesignCourse Premium for 1-on-1 Design Training with Me:**

Project Files: – We’ll first design a loading icon in Adobe Illustrator, export it as a SVG and then edit the SVG code to make parts of it animate.

Follow us:

50 thoughts on “Create a SVG Loading Animation with Adobe Illustrator”

  1. Thank you dear.

    I was in need of differentiated gauges and I didn't know how SVGs were made.

    You gave great ideas to create them!


  2. I thing that GSAP also JS animations is performs better. i found some great examples here:adsspirit com.

  3. Jack Feegel says:

    this isn't showing how to do much with illustrator, just the text edit html

  4. That was great. The pace was good. No extra explanations. Great English. Well done.

  5. James Chizzy says:

    Gary sure looks different

  6. Leo Garza says:

    If anyone wants to do the animation through css, use this:

    @-webkit-keyframes rotation {

    0% {

    transform: rotate(0deg);

    transform-origin: center center;


    100% {

    transform: rotate(359deg);

    transform-origin: center center;



  7. Diseño Erco says:

    there is no other way to animate svg's with out using code?

  8. ZiLoX says:

    So the title is misleading. A Text editor aint illustrator.

  9. You should look into the align window.

  10. Seyfettin says:

    I have a question, How you know like this tons of codes 🙂

  11. stick your finger up your ass

  12. Chris Hansen says:

    Cool vid. I learned something. Thanks

  13. The title is completely misleading "Design in Illustrator and Code SVG Animations in Subllime" will be more apt.

  14. Tae Sung Lim says:

    While this tutorial is very informative and instructive, I don't think it suits the title "Create animation with Illustrator"; you programmed SMIL directly through a code editor, without using Illustrator's visual interface.

  15. Design Meat says:

    Your teaching style is great. You also don't talk a mile a minute, and explain things well. Not too much 'blah blah blah' but just enough critical information. And the pausing and jumping back in was done so seamlessly, if you hadn't said you paused nobody would ever have known (but thanks for the mention; it made you more human and hilarious)….I felt like you were a real person I could have a coffee with and talk shop with about design. And not be drinking coffee with a pretentious asshole. 😀 Your humanity and ability to describe things well without 'word clutter'…while also not leaving out critical information is what made me subscribe to your channel. Thanks for this. Hope you're still running design courses….this vid is nearly 4 years old. 😀 Thanks again. Made my day.

  16. Three One says:

    This guy has a bad attitude.

  17. John Doe says:

    Let me be brutal, your logo is bad. The outline is wonky and doesn't read well

  18. Sukkulents says:

    He looks like he never hit puberty

  19. please record this video in 4k

  20. Dhaval Patel says:

    Not Working Your Code My SVG File

  21. Vinayak Gaud says:

    Gotcha!! Just one doubt why he used id if that isn't even matter?

  22. The Dweeb says:

    Dead link on the project files. Just takes you to the courses

  23. Nicolas Luna says:

    Perfect Tutorial!! Thanks =D

  24. Miron Swyst says:

    can this be applied to an e-mail ….signoff let say ??

  25. Miron Swyst says:

    officially tired of wix commercials – great tut*

  26. Dat Nguyen says:

    Thanks! It's stunning!:D

  27. It sucks! Since the project-files are removed. Can't find the project files on given link.

  28. What is the HTML editor you are using?

  29. Lập trình says:

    can you give me source file svg

  30. Tanagi Team says:

    Thank you for this quick , great , in-depth explanation for SVG file extension, basically another language only that it's not usable with all browsers yet (it's been 3 years since you posted this tutorial :)) so it's importent to embad the actual code just like you did in this tutorial and not just placing an imageName.svg in the html ,hope it will get there soon , SVG's are great time and space savers.

  31. "You know what? I don't care about the id" Hahaha.. first time I hear that.. that was funny. Very good tutorial! Thank you very much for this information because It was clear and easy to understand. Video as well.

  32. Wow! what a nice tutorial! very explicit!

  33. Tam Truong says:

    Super helpful. Thanks!

  34. Tech Ansh says:

    ohh wow

    animation related all updated and learn all software in my channel see hope u like

Leave a Reply

Your email address will not be published. Required fields are marked *