Facebook loading animation using CSS3

背景虚化加载，用css3实现facebook的loading的实现方式。

image.png

To display loading effect in webpage based application, you need some ideas on CSS3. Here we are using CSS3 Keyframes to create desire effect.
Content Placeholder Animation like Facebook using Shimmer
Lets start with loading animation.
Animation 1 :
Here we are using animation1.css file to display loading effect in webpage.

animation1.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="animation1.css">
</head>
<body>
<div class="animationLoading">
 <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
 </div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
</body>
</html>

animation1.css
style-sheet file which helps to display loading effect.

body{
  
  margin:90px auto;
  width: 500px;
   background-color: #e9eaed;
}

.animationLoading{
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9;
  border-radius: 3px; 
  display: block;
  height: 324px;
  width: 494px;
  padding: 12px;
}
@keyframes animate {
    from {transition:none;}
    to {background-color:#f6f7f8;transition: all 0.3s ease-out;}
}

#container{
  width:100%;
  height:30px;
}
#one,#two,#three,#four,#five,#six
{
  position:relative;
  background-color: #CCC;
  height: 6px;
  animation-name: animate; 
  animation-duration: 2s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#one{  
  left:0; 
  height: 40px;
  width: 40px;  
}

#two{
  left:50px;
  top:-33px;
  width: 25%;
}

#Three{
  left:50px;
  top:-20px;
  width: 15%;
}

#four{
  left:0px;
  top:30px;
  width: 80%;
}

#five{
  left:0px;
  top:45px;
  width: 90%;
}

#six{
  left:0px;
  top:60px;
  width: 50%;
}

Animation 2 :
Here we have designed one more animation effect, that you can easily integrate in web application. You need to include animation2.css here.
animation2.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="animation2.css">
</head>
<body>
<div class="animationLoading">
 <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
 </div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
</body>
</html>

animation2.css
style-sheet file which helps to display loading effect.

body{
  
  margin:90px auto;
  width: 500px;
   background-color: #e9eaed;
}

.animationLoading{
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9;
  border-radius: 3px; 
  display: block;
  height: 324px;
  width: 494px;
  padding: 12px;
}
@keyframes animate {
     0% {
     background-position: -468px 0
   }
   100% {
     background-position: 468px 0
   }

}

#container{
  width:100%;
  height:30px;
}
#one,#two,#three,#four,#five,#six
{
  position:relative;
  background-color: #CCC;
  height: 6px;
  animation-name: animate; 
  animation-duration: 2s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;   
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
  background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  -webkit-background-size: 800px 104px;  
}

#one{  
  left:0; 
  height: 40px;
  width: 40px;  
}

#two{
  left:50px;
  top:-33px;
  width: 25%;
}

#Three{
  left:50px;
  top:-20px;
  width: 15%;
}

#four{
  left:0px;
  top:30px;
  width: 80%;
}

#five{
  left:0px;
  top:45px;
  width: 90%;
}

#six{
  left:0px;
  top:60px;
  width: 50%;
}

Download Link :
------------------------------
https://github.com/skptricks/php-Tutorials/tree/master/Facebook%20loading%20animation%20using%20CSS3

Facebook loading animation using CSS3

推荐阅读更多精彩内容