CSS3 Loading Animation

September 27, 2011

Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome. What do you wait, start reading!

First Example CSS3 Loading Animation

HTML

In this first example, the markup is very simple, where we will create an unordered list and we will create inside the div to create the effect and to control the total animation.

<ul id="progress">
    <li>
    <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
    <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
    <div id="layer2" class="ball"></div>
    <div id="layer8" class="pulse"></div>
    </li>
    <li>
    <div id="layer3" class="ball"></div>
    <div id="layer9" class="pulse"></div>
    </li>
    <li>
    <div id="layer4" class="ball"></div>
    <div id="layer10" class="pulse"></div>
    </li>
    <li>
    <div id="layer5" class="ball"></div>
    <div id="layer11" class="pulse"></div>
    </li>
</ul>

CSS

Nothing difficult, just create the graphics for the unordered list, take special care to animation, thanks to the delay and control layers we can create this effects!

ul#progress {
    list-style: none;
    width: 125px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

ul#progress li {
    /* Style your list */
	float: left;
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-left: 10px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #000;
}

ul#progress li:first-child {
    margin-left: 0;
} /* Remove the margin first li element */

.ball {
    /* Style your ball and set the animation */
	background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 15px;
    height: 15px;
    border-radius: 50px;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -moz-animation: loading 1s linear forwards;
    -webkit-animation: loading 1s linear forwards;
}

.pulse {
    /* Style your second ball to create the amazing effects */
	width: 15px;
    height: 15px;
    border-radius: 30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position: absolute;
    top: -1px;
    left: -1px;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -webkit-animation: pulse 1s ease-out;
    -moz-animation: pulse 1s ease-out;
}

/* Control Layers */
#layer1 {
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

#layer2 {
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

#layer3 {
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

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

#layer5 {
    -moz-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

#layer7 {
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

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

#layer9 {
    -moz-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

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

#layer11 {
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}

@-moz-keyframes loading {
    0% {
        -moz-transform: scale(0,0);
    }

    100% {
        -moz-transform: scale(1,1);
    };
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(0,0);
    }

    100% {
        -webkit-transform: scale(1,1);
    };
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0);
        opacity: 0;
    }

    10% {
        -moz-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -moz-transform: scale(1.75);
        opacity: 0;
    }

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

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    10% {
        -webkit-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -webkit-transform: scale(1.75);
        opacity: 0;
    }

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

Second Example CSS3 Loading Animation

HTML

In this second example, we will see how to create a loading bar that fits any resolution. Just create a container that has a width of 100% and put inside a class via the animation will run the entire width of the screen.

<div id="content">
<span class="expand"></span>
</div>

CSS

It looks like the style, much simpler than the previous, this is the basic setting, you can modify at your convenience.

#content {
    width: 100%;
    /* Full Width */
	height: 5px;
    margin: 50px auto;
    background: #000;
}

.expand {
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation: fullexpand 10s ease-out;
    -webkit-animation: fullexpand 10s ease-out;
}

/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
    0%  { width: 0px;
}

100% {
    width: 100%;
}	
}

@-webkit-keyframes fullexpand {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

Third Example CSS3 Loading Animation

HTML

In this last example, recreate a simple loading bar with the opacity parameter, there will always control layer to control the exact timing of animation.

<ul id="loadbar">
    <li>
    <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  -->
    </li>
    <li>
    <div id="layerFill2" class="bar"></div>
    </li>
    <li>
    <div id="layerFill3" class="bar"></div>
    </li>
    <li>
    <div id="layerFill4" class="bar"></div>
    </li>
    <li>
    <div id="layerFill5" class="bar"></div>
    </li>
    <li>
    <div id="layerFill6" class="bar"></div>
    </li>
    <li>
    <div id="layerFill7" class="bar"></div>
    </li>
    <li>
    <div id="layerFill8" class="bar"></div>
    </li>
    <li>
    <div id="layerFill9" class="bar"></div>
    </li>
    <li>
    <div id="layerFill10" class="bar"></div>
    </li>
</ul>

CSS

As you can see the process is the same as the first example, you just know a little CSS to create wonderful effects.

ul#loadbar {
    list-style: none;
    width: 140px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 75px;
}

ul#loadbar li {
    float: left;
    position: relative;
    width: 11px;
    height: 26px;
    margin-left: 1px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #000;
}

ul#loadbar li:first-child {
    margin-left: 0;
}

.bar {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    width: 11px;
    height: 26px;
    opacity: 0;
    -webkit-animation: fill .5s linear forwards;
    -moz-animation: fill .5s linear forwards;
}

#layerFill1 {
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

#layerFill2 {
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

#layerFill3 {
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

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

#layerFill5 {
    -moz-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

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

#layerFill7 {
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}

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

#layerFill9 {
    -moz-animation-delay: 4.5s;
    -webkit-animation-delay: 4.5s;
}

#layerFill10 {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

@-moz-keyframes fill {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    };
}

@-webkit-keyframes fill {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    };
}

Conclusion

In this tutorial we created the simple but beautiful animations using only CSS3, for further information I recommend reading this reference CSS3 Animations.

21 Comments

  1. But are these blank elements semantically good?

  2. Very cool, but have to agree with Jitendra, seems less than semantic, a lot of cruft. It’s also entirely pixel based, although that could probably be changed. As a purely decorative feature, how is this better than delivering the same type of user-feedback with unobtrustive Javascript? At least then it would be possible to use less elements, and the markup could be loaded only if the user agent supports it.

    • In fact, the next tutorial will use jQuery to be displayed on supported browsers, and if that javascript is disabled the content will still be visible, finally i insert the markup for animation directly in jQuery.

  3. so amazing…
    sorry if spam, this any tools for simple loading used CSS only
    http://ben-tools.blogspot.com/2011/09/membuat-loading-dengan-css.html

    Cheers

  4. There is also problem in Opera 11.51, Win7 but in Firefox it looks awesome.

  5. wow thats unique tutorial, like spinner, but this is better look..

  6. Hello dear.You have written a great post. Going to share with my followers on twitter. Thanks for sharing.

  7. Nice tutorial,
    I couldn’t make animations running from other tutorials so I was doing everything using transitions, but now I’m not :P
    Thanks a lot!

    Here is something I made
    http://dev.cqproject.net/files/.css3/ball-animation/with-shadow.html

    PS: Could you write something about animation-javascript events?
    I can only controll my animations by setting Timeout, but it isn’t accurate.
    (see link above)

  8. I also use animation-delay, but my animation requires that I set two delays for each ring, which is problem. First delay is the initial delay, set for each ring in 2sec intervals (0, 2, 4, 6,..) and then 14sec delay, which is time needed for whole animation to finish and reiterate.
    Talking about it, I’ve just figured out a solution, maybe. And that should mean less javascript controlling. I only need to modify each ring’s initial delay and set it to 14 sec, after it’s first cycle. — If I only could use animationend or animationiteration events :/

    Anyway, in my opinion jquery.animate would be good solution only if I replaced whole css animation with it as I don’t think jquery and css animation would work together.

    Still, this whole thing eats a lot of CPU and is laggy, so I don’t think there is any use in it (sadly). At least before they optimize animation processing…

  9. Thanks! Very usefull!

  10. Nikolai

    That’s great. Is it possible to be made loading animation like heart diagram (up and down, up and down…)?

  11. You made my day! Thank you for these cool animations. 8-)

  12. Charles

    Great job!!!
    Thanks

  13. chan

    It’s very good

  14. how i could use in Internet explorer?

  15. Ariyan

    Thanks for the nice tutorial

Leave a Reply