Facebook like loading animation using css3

Yesterday I was working on animation task of a client project and client needs to add a loading icon like Facebook to his project. So, I decided to  create a custom Facebook like loading animation using CSS3.

For me, CSS3 seems quite easier and flexible then the JavaScript. Moreover, CSS3 effects looks natural and loaded faster in compare to the JavaScript. So, to generate the loading animation I used CSS3 properties like – animation-name, animation-duration, animation-iteration-count etc.

Please note that, CSS3 worked and supported by latest the browsers. This script has been tested on the latest versions of Firefox, Chrome and Safari. I hope that helps you.

– CSS3 Source Code:

@-webkit-keyframes fb_loading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes fb_loading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

p#facebook_loading {
    text-align: center; 
    margin: 100px 0 0 0;

}

#facebook_loading span {
    -webkit-animation-name: fb_loading;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;			
    -moz-animation-name: fb_loading;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    font-weight: bold;
    font-size:3px;
    border: 1px solid black;
    margin-right: 1px;                                            
    padding: 1px 1px 1px 1px;
    background: lightgray;
}

#facebook_loading span:nth-child(1) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;                                            

}

#facebook_loading span:nth-child(2) {
    -webkit-animation-delay: 150ms;
    -moz-animation-delay: 150ms; 
}

#facebook_loading span:nth-child(3) {
    -webkit-animation-delay: 250ms;
    -moz-animation-delay: 250ms;
}

– HTML Source Code:

Just add following simple html code in your page.

<p id="facebook_loading"><span></span><span></span><span></span></p>

Check Demo

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!