Creating Facebook style loading animation using CSS3

By | August 9, 2015



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

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.