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.

Support

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:
  • Shahaab

    LOL, but nice try

  • Thats nice (Y)

  • Max John

    Wow

  • Max John

    I have a question : will this load faster than the image ?

    • huzoorbux

      Yes it can Just change this animation loading time on this line.
      -webkit-animation: loading 0.5s infinite alternate;

      Currently its 5s make it 3s it will load faster.

  • abdul

    السلام عليكم
    thank u so much my daer
    how to share and like my website product in facebook if u have this tutorial please send me link my email majeedk96@yahoo.com thank u so much