how to create placeholder while loading like facebook

Question

How to create background loading lines like facebook did while loading the content using angular js.

Answer 1

You can make it with some css background linear-gradient:

@keyframes placeHolderShimmer{      0%{          background-position: -468px 0      }      100%{          background-position: 468px 0      }  }  .linear-background {      animation-duration: 1s;      animation-fill-mode: forwards;      animation-iteration-count: infinite;      animation-name: placeHolderShimmer;      animation-timing-function: linear;      background: #f6f7f8;      background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);      background-size: 1000px 104px;      height: 338px;      position: relative;      overflow: hidden;  }

<div class="linear-background">          </div>

And paint with divs in white for a effect:

@keyframes placeHolderShimmer{      0%{          background-position: -468px 0      }      100%{          background-position: 468px 0      }  }    .linear-background {      animation-duration: 1s;      animation-fill-mode: forwards;      animation-iteration-count: infinite;      animation-name: placeHolderShimmer;      animation-timing-function: linear;      background: #f6f7f8;      background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);      background-size: 1000px 104px;      height: 200px;      position: relative;      overflow: hidden;  }  .inter-draw{    background: #FFF;    width: 100%;    height: 100px;    position: absolute;    top: 100px;  }  .inter-right--top{    background: #FFF;    width: 100%;    height: 20px;    position: absolute;    top: 20px;    left: 100px;  }  .inter-right--bottom{    background: #FFF;    width: 100%;    height: 50px;    position: absolute;    top: 60px;    left: 100px;  }  .inter-crop{    background: #FFF;    width: 20px;    height: 100%;    position: absolute;    top: 0;    left: 100px;  }

<div class="linear-background">    <div class="inter-draw"></div>    <div class="inter-crop"></div>    <div class="inter-right--top"></div>    <div class="inter-right--bottom"></div>  </div>

If you need to do multiple, this can be laborious, so this library automates: placeload.js

Answer 2

You could have a look at this blog post which describes in detail how the placeholders on Facebook work:

http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

Essentially, you put in some static html styled with css to look similar to the content that is coming.

<div class="placeholder">   <!-- some boxes in light grey to look like content --> </div> 

When you are finished loading, you remove the placeholder:

$(".placeholder").remove();