January 21, 2014 10:04 am

How to create Facebook style loading animation using CSS3

Today I am going to write first time on CSS3 and creating Facebook style loading animation without any image, images took more time to load then this simple CSS animation. Using HTML basic element span and CSS3 properties like 3D transform you can create beautiful and lightweight animations. These animations not look like exactly as images but user can understand something happening.

How to create Facebook style loading animation using CSS3

Basic HTML

Create a div container with loadFBstyle id and add 3 span inside that div.

CSS required to get static lines:

This CSS shows 3 vertical lines only

Total animation time defined 0.4 second.

CSS to animate lines:

span:nth-of-type(n) allow you to select elements on there order here we used 2,3 for second span and 3rd span.

Delay 0.1s in animation after 1st element for second span. If you want to add more lines do as above and make them animated with delay.

Here we used keyframe and loading is the name of animation. Animation start from 0% and end on 100% from start to end we increase size of lines from 7px to 10px.


I hope you like this tutorial and enjoy it feel free to comment bellow.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories: