Sunday, December 10, 2017

Facebook loading animation using CSS3

Today we are going to discuss Facebook loading animation using CSS3.  If you observed that when you open Facebook in web application it shows a content loading placeholder like below screenshots.
How the Facebook content placeholder works
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.

2 comments:

  1. Very nice article Sir
    Thanks for sharing this News with us

    ReplyDelete
  2. How to create chat-msg that look like Facebook is part of my work in school using html and css code only

    ReplyDelete