Facebook Type Loading Effect

Facebook Type Loading Effect – CSS3

In this tutorial we will show you Facebook Type Loading Effect – CSS3.Here we are using CSS3 to accomplish this.It Give us a awesome loading effect, it is kind of same what facebook is using for loading effect.

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook Type Loading Effect</title>
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<div class="effect">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

CSS3:

body
{
width:980px;
margin:0px auto;
padding-top:250px;
padding-left:650px;
background:#000;
}
.effect > div {
    background-color:#FFFFFF;
    border:1px solid #000000;
    float:left;
    height:60px;
    margin-left:5px;
    width:5px;
    opacity:0.1;

    /* css3 transform - scale */
    transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);

    /* css3 animation */
    animation-name:effect;
    -webkit-animation-name:effect;
    animation-duration:1.2s;
    -webkit-animation-duration:1.2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:effect;
    -moz-animation-duration:1.2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:effect;
    -o-animation-duration:1.2s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
}
.effect > div:nth-child(1) {
    /* css3 animation */
    animation-delay:0.24s;
    -webkit-animation-delay:0.24s;
    -moz-animation-delay:0.24s;
    -o-animation-delay:0.24s;
}
.effect > div:nth-child(2) {
    /* css3 animation */
    animation-delay:0.48s;
    -webkit-animation-delay:0.48s;
    -moz-animation-delay:0.48s;
    -o-animation-delay:0.48s;
}
.effect > div:nth-child(3) {
    /* css3 animation */
    animation-delay:0.72s;
    -webkit-animation-delay:0.72s;
    -moz-animation-delay:0.72s;
    -o-animation-delay:0.72s;
}
.effect > div:nth-child(4) {
    /* css3 animation */
    animation-delay:0.96s;
    -webkit-animation-delay:0.96s;
    -moz-animation-delay:0.96s;
    -o-animation-delay:0.96s;
}
.effect > div:nth-child(5) {
    /* css3 animation */
    animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -o-animation-delay:1.2s;
}

/* css3 keyframes - effect */
@-webkit-keyframes effect {
    0% {
        -webkit-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -webkit-transform:scale(0.7);
        opacity:0.1;
    }
}
@-moz-keyframes effect {
    0% {
        -moz-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -moz-transform:scale(0.7);
        opacity:0.1;
    }
}
@-o-keyframes effect {
    0% {
        -o-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -o-transform:scale(0.7);
        opacity:0.1;
    }
}