Tutorials Css Facebook like loading animation using css3

Facebook like loading animation using css3

August 06,2012 Read: 1019 Times

After doing long project work I feel so board and exhausted. For refreshing my mind I thought to make something funny with CSS3 and write a blog on it. Last day, worked on CSS3 animation section in my project and did a good job. I’d modified my some codes in that script and made Facebook like loading animation.

Personally I feel css3 has awesome power and more flexible then JavaScript libraries. Also CSS3 effects looks great and loaded fast rather then JavaScript. May be one day css3 will replace JavaScript libraries. In this loading animation I’d used simple css3 properties. Such as- animation-name, animation-duration, animation-iteration-count etc. Remember CSS3 only supported by latest browsers. This script has been tested and it's working in the latest versions of Firefox, Chrome and Safari. Don’t try to run it in IE6 :P

Enjoy!

- 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.

Demo

Download

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!