Facebook style responsive HTML contents represent animated loader

Today new loader style in mobile and web based applications is HTML animated loader like Facebook.  today i describe you how to build loader for your contents loading when page is loaded.

Loader is main attraction of website and also it is part of fast queue contents loading. main things is represent your contents in loader view. see below steps for how to build loader for your website.

See below demo example:

View Demo  |  Download Demo

Below is a basic CSS for loader box.

article.qb-loader.entry {
    background: #e9ebee !important;
    margin: 50px 60px;
    padding: 0px;
    position: relative;
    height: 396px;
    overflow: hidden;
    display: block;
}
article.qb-loader.entry:before{

-webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: loader_animate;
    -webkit-animation-timing-function: linear;
    background-image: linear-gradient(to right, #e9ebee 0%, #f5f5f5 20%, #ebebeb 40%, #e9ebee 100%);
    background-repeat: no-repeat;
    background-size: 1042px 100%;
    content: ' ';
    display: block;
    height: 100%;
    position: relative;
    z-index: 999999;
    display: block;
}
.qb-loader .wrapper{
    position: absolute;
    top: 0px;
    width: 100%;
}
.qb-loader .wrapper .linemid{
    background: #fff;
    z-index: 999999999;
    position: relative;
}
.w100{
    width: 100%;
}
@keyframes loader_animate
{
    0%
    {transform:translateX(-468px)}
    100%
    {transform:translateX(468px)}
}
@-moz-keyframes loader_animate
{
    0%
    {transform:translateX(-468px)}
    100%
    {transform:translateX(468px)}
}
@-ms-keyframes loader_animate
{
    0%
    {transform:translateX(-468px)}
    100%
    {transform:translateX(468px)}
}
@-o-keyframes loader_animate
{
    0%
    {transform:translateX(-468px)}
    100%
    {transform:translateX(468px)}
}

/* For responsive */
@media only screen and (max-width: 800px)
{
article.qb-loader.entry {
    margin: 20px !important;
    padding: 0px !important;
}
}

Now you need HTML code for loader box with contents represents:

<article class="qb-loader entry">

<div class="wrapper">
  
  <header class="entry-header">
<div class="linemid" style="
    
    width: 100%;
    height: 3px;
    
"></div><div class="linemid" style="
    width: 100%;
    height: 8px;
    margin-top: 35px;
"></div>

<div class="linemid" style="
    width: 70%;
    height: 18px;
    margin-top: 35px;
    float: left;
"></div><div class="linemid" style="
    width: 30%;
    height: 53px;
    margin-top: 0px;
    float: left;
"></div>         
<div class="linemid" style="
    width: 60%;
    height: 30px;
    margin-top: 19px;
    float: left;
"></div><div class="linemid" style="
    width: 40%;
    height: 49px;
    margin-top: 0px;
    float: left;
"></div>
  </header>
  <div class="entry-content" itemprop="text" style="
    float: left;
    width: 100%;
">
  
  <div class="linemid" style="
    width: 44%;
    height: 30px;
    margin-top: 154px;
    float: left;
"></div>
  
  <div class="linemid" style="
    width: 3%;
    height: 184px;
    margin-top: 0;
    float: left;
    margin-left: 10;
"></div>
  
  
  
<div class="linemid" style="
    
    width: 53%;
    height: 5px;
    margin-top: 16px;
    float: right;
"></div>
<div class="linemid" style="
    
    width: 53%;
    height: 5px;
    margin-top: 16px;
    float: right;
"></div>
<div class="linemid" style="
    
    width: 53%;
    height: 5px;
    margin-top: 16px;
    float: right;
"></div>
<div class="linemid" style="
    
    width: 53%;
    height: 5px;
    margin-top: 16px;
    float: right;
"></div>
<div class="linemid" style="
    
    width: 30%;
    height: 19px;
    margin-top: 16px;
    float: left;
"></div>
<div class="linemid" style="
    
    width: 23%;
    height: 35px;
    margin-top: 0px;
    float: right;
   
"></div>
<div class="linemid" style="
    width: 20%;
    height: 49px;
    margin-top: 16px;
    float: left;
"></div>
<div class="linemid" style="
    width: 33%;
    height: 65px;
    margin-top: 0px;
    float: right;
"></div></div>
<footer class="entry-footer" style="
    float: left;
    width: 100%;
">

<div class="linemid" style="
    
    width: 40%;
    height: 11px;
    margin-top: 22px;
    float: left;
"></div><div class="linemid" style="
    
    width: 60%;
    height: 33px;
    margin-top: 0px;
    float: left;
"></div>
<div class="linemid" style="
    
    width: 50%;
    height: 11px;
    margin-top: 22px;
    float: left;
"></div><div class="linemid" style="
    
    width: 50%;
    height: 33px;
    margin-top: 0px;
    float: left;
"></div></footer>
  </div>

</article>

For above code is used for represent that block and :after CSS3 property is used for a animations of this block. if you want to display. Write comment if you not understood or need any help…. thanks….

Did you want to setup this type of loader for your website?

Contact me, i m ready for help you