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

[wpdm_file id=64]DEMO

Basic HTML

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

<div class="loadFBstyle">

            <span></span>

            <span></span>

            <span></span>

</div>

CSS required to get static lines:

.loadFBstyle span{

display: inline-block;

vertical-align: middle;

width: 5px;

height: 7px;

margin: 50px auto;

background: hsl(0, 0%, 94%);

border-radius: 0px;

-webkit-animation: loading 0.4s infinite alternate;

-moz-animation: loading 0.4s infinite alternate;

}

This CSS shows 3 vertical lines only

-webkit-animation: loading 0.4s infinite alternate;
-moz-animation: loading 0.4s infinite alternate;

Total animation time defined 0.4 second.

CSS to animate lines:

.loadFBstyle span:nth-of-type(2){

    -webkit-animation-delay: 0.1s;

    -moz-animation-delay: 0.1s;

}
.loadFBstyle span:nth-of-type(3) {

    -webkit-animation-delay: 0.2s;

    -moz-animation-delay: 0.2s;

}

@-webkit-keyframes loading {
    0% {

        width: 5px;

        height: 7px;

        background: hsl(222, 37%, 47%);

        -webkit-transform: translateZ(0);

    }
    100% {

        height: 10px;

        background: hsl(0, 0%, 94%);

        -webkit-transform: translateZ(-61px);

    }
}
@-moz-keyframes loading {
    0% {

        width: 5px;

        height: 7px;

        background: hsl(222, 37%, 47%);

        -moz-transform: translateZ(0);

    }
    100% {

        height: 10px;

        background: hsl(0, 0%, 94%);

        -moz-transform: translateZ(-61px);

    }
}

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

.loadFBstyle span:nth-of-type(2){

    -webkit-animation-delay: 0.1s;

    -moz-animation-delay: 0.1s;

}

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.

@-moz-keyframes loading {
    0% {

        width: 5px;

        height: 7px;

        background: hsl(222, 37%, 47%);

        -moz-transform: translateZ(0);

    }
    100% {

        height: 10px;

        background: hsl(0, 0%, 94%);

        -moz-transform: translateZ(-61px);

    }
}

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:

6 responses to “How to create Facebook style loading animation using CSS3”

  1. Shahaab says:

    LOL, but nice try

  2. Max John says:

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

    • huzoorbux says:

      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.

  3. abdul says:

    السلام عليكم
    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 [email protected] thank u so much

Leave a Reply

Your email address will not be published. Required fields are marked *