CSS3 Loading Animation Loop

October 4, 2011

Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.

I remember this animations are only visible in Firefox, Safari and Chrome.

Let’s see how to create it.

First Example CSS3 Loading Animation Loop

HTML

In this first example, create only two div and thanks to the border-radius property, they will take the circle shape.

<div class="ball"></div>
<div class="ball1"></div>

CSS

For the CSS style is very simple, just play with the parameters for the graphic you want, as regards the animation simply use the transform:rotateproperty.

.ball {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spin .5s infinite linear;
    -webkit-animation: spin .5s infinite linear;
}

.ball1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoff .5s infinite linear;
    -webkit-animation: spinoff .5s infinite linear;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-moz-keyframes spinoff {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(-360deg);
    };
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinoff {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    };
}

Second Example CSS3 Loading Animation Loop

HTML

The second example is the same as the precedent for the markup, the main difference you’ll find it in the CSS.

<div class="circle"></div>
<div class="circle1"></div>

CSS

Simply in this example we are going to act on the rotation, and more we insert an animation that will allow us to have an pulse effect.
This effect will be active only in the first circle.

.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

Third Example CSS3 Loading Animation Loop

HTML

In this latest example we find a simple loop that is animated thanks to the transform:scale property.
The markup is longer than its predecessors, but this can vary according to the blocks you want to insert.

<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>

CSS

Here the style is much easier to handle since we’re going to take to apply the effect to animation:delay property of each block.

.barlittle {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    width: 10px;
    height: 10px;
    float: left;
    margin-left: 5px;
    opacity: 0.1;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-animation: move 1s infinite linear;
    -webkit-animation: move 1s infinite linear;
}

#block_1 {
    -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

#block_2 {
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}

#block_3 {
    -moz-animation-delay: .2s;
    -webkit-animation-delay: .2s;
}

#block_4 {
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}

#block_5 {
    -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    };
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    };
}

Conclusion

I hope that with this tutorial you learned how to create simple animations loop using only the CSS3 properties.

72 Comments

  1. Muy bonito y rápido de realizar!.. nice!

  2. Very cool! Nice work. Also, I love your transparent “back to top” but wouldn’t it be less obstructed on the left side of the content?

  3. Staff

    I can’t even make the demo work :(

  4. Carino il problema adesso e trovare uno script per il preload da abbinare in modo che lo stoppi e faccia comparire la pagina caricata =)

  5. Sarah

    Thanks for the nice animation loop ! Im not really good in css and have a little problem, maybe someone could give me a hint on how to solve this. I cant get the Positioning of the second Example to work. I want it as an Loading Animation for my Page 20% from the bottom. Everything i try out makes one circle disappear or the animation stops or .. i dont know, could someone give me a Hand please? :)

    • Hello Sarah, create a container and put it inside the loading animation.
      I’ve tested and it works, you just to center the container!

      .container {
      position:fixed;
      bottom:20%;
      width:960px; /* Or your width */
      }

  6. Sarah

    Thanks, that worked so far. :D

    But now the circle1 makes problems. After the Animation finishes, circle1 goes around 50px over the normal animation and rotates forever.

    Would you help me again ? ^^

  7. Sarah

    I found the bug i implemented hihi. The wrong javascript code, im so stupid sometimes ! :)

    But i sincerely thank you for you help and will to help further, thats not naturally. Awesome css.

    Greetings Sarah

  8. Brilliant CSS3 animation, and very neat and easy-to-edit code, thank you for sharing :)

  9. i never thought that this can be done with css3.. Serious You AMAZING

  10. Man I love the second animation and all just with CSS3. Gonna explore some more about this stuff. Guess there’s no limits for what is possible.

    Great share !

  11. Very very cool.
    Personally, this whole animation stuff is a little too much for me, especially the code. I know they’re practical uses for it, but in this case, I’d probably open up Photoshop or Flash, make the animation that way and export it as an .gif file.

    But the powers of CSS3 are awesome. Great article and tutorial.

  12. guest

    How do i program it in javascript to call the animation to stop after the page loads to a certain point?

    I look at several javascript and jquery link cilcks but none of them seem to have worked?

  13. Muy buena animacion, la utilizare en mi blog. Saludos desde Spain.

  14. Luca

    Great Work! Check Opera issues.

  15. AWESOME TUTORIAL!!!! Going to start getting real familiar with HTML5 & CSS3. Great concepts to learn…have to phase out and build upon HTML and CSS foundation

  16. Seth

    Awesome stuff, your posts never cease to amaze me! My favorites so far are your Skill Bar Animation ( http://www.alessioatzeni.com/blog/css3-skill-bar-animation/ )
    and your Graph Animation ( http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Graph-Animation/index.html ). I definitely plan on using the graph for a little experiment on my own site, of course you’ll be getting full credit! ;)

    Keep it up,
    -Seth G.

  17. I think animation is not possible without J query.

  18. Thanks for Sharing.
    i think CSS3 is not work in older browser like IE6,7

  19. Really cool, thanks for this article and nice website too!!!

  20. nice method… whether that play/pause animation working????

  21. Dan

    Thanks for the tutorial! This is awesome. I was actually working on using it for a personal project but ran into an issue. It was running great for a while, but then all of a sudden it started getting really slow and making the entire app run slow. I take out the spinning animation and everything runs smoothly again. Has anyone seen something like this where a spinner animation brings the page to a sluggish halt? I really like the spinner animation, but I can’t use it if it slows everything down.

  22. Nice! I also found a generator of those things: http://cssload.net

  23. Chamil

    Wow great

  24. Mi Eindra

    That Great

  25. Niraj

    With your post help, I just made a clock in CSS3 with no javascript. Thanks

    http://webstutorial.com/css3-clock/css3

  26. Awesome animations. I think I saw these on the computer screen in the movie Tron. Sweet stuff.

  27. Wu Feng

    Please publish the example for Visual Basic thank you.

  28. nice tutorial, thank

  29. Tanvir

    Not for IE…..

  30. I love it! What`s the license of this? Would love to use it!
    Benjamin

  31. Thanks!!! Unfortunately i`ll not be able to link to it so that`s great news for me. I`ll however tell everyone how awesome you`re :-)
    Benjamin

  32. Hi Alessio,

    Awesome work man! I’ll definitely be implementing this.

    Just a note on the code… Instead of defining a separate “spinoff” keyframe rule, you could simply ass the “backwards” keyword in .ball1 which would reverse the direction of the animation.

  33. Jeez, I meant “add”! :-)

  34. Blankon56

    nice work, can u tell how they can load on my page. thanks Bluxart..

  35. ToQuE-Peru

    muy muy bueno… (Y)

  36. Great code! It will be very useful for my phonegap android app!!

  37. Hi, thanks a lot for that! This will come in very useful for some of our projects. We especially like the last animation. Thanks again. Attitude

  38. Hi thank a lot , but how do i add this on my website, so while it’s loading it’ll show the loading button.

    Thanks a lot again :D !

  39. Zed

    Wow! this is great a design. How can it be implemented on a website? so that it should have a stop and after which the page displays?

    Thanks and thumbs up!!!

  40. Sushma

    In ie8 it is not working please tell me the solution

  41. ronald

    nice one, but is there any demo website using these preloaders. coz I’m a noob, I don’t even know how to set up with content layer.

  42. hi this animation is very cool. but is this animation make our website load heavily or not…?

  43. Thank you for the tutorial. It helps a lot.
    But unfortunately, the 2nd example is not working any more on the latest Google Chrome.
    (The outskirt rotation is not working, but its rotating if you inspect the element. Maybe Chrome not supporting border rotation anymore?)
    It still works in firefox though :D

  44. Banana Developer

    Stavo tentando di fare qualcosa di simile ma non capivo proprio cosa sbagliavo, grazie Alessio.

  45. No Javascript , no flash , but cool animation !
    awesome !!!

  46. Excellent Animations, will definitely boost my User experience ! thanks a lot

  47. Simple and awesome! :D This is really helpful for something I’m working on right now. Thank you!

  48. brilliant work…!! thnx for sharing…

  49. U R AWESOME

    Nice work…!! thnx for sharing…

  50. lakshmipathi

    this is not working in ie9 as well

  51. Worked nicely! Thanks :)

  52. Thanks, used it on my website :)

  53. Wooow, that is cool. Unique loading site. I like it!

  54. Solo Css3 animations, Cool. Saludos desde Colombia

  55. You are simply a genius. Thanks a lot!!

Leave a Reply