背景虛化加載，用css3實(shí)現(xiàn)facebook的loading的實(shí)現(xiàn)方式。
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
