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%; }



Video Link :





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%; }



Video Link :



Download Link :

------------------------------

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



Please do comment if you like this tutorial or suggestions.

Today we are going to discussIf you observed that when you open Facebook in web application it shows a content loading placeholder like below screenshots.