Show animation during loading?

Question

I didn’t find much on that subject in tutorials, I don’t know if anyone else has noticed that services like Facebook, Netflix use a kind of "load" before showing the content, both seem to work the same way, in some tutorials said that this is done with the function ". jQuery’s load" but the same applies to texts like facebook uses? The following are examples of the two services: Facebook: http://imgur.com/IxOu7jP Netflix: http://imgur.com/GLHw6qM

What kind of function is used to do this? Makes uploading the site look so beautiful.

Answer 1

When we analyze what happens with Facebook, we can see that it has a fixed HTML page, and continues loading the other items via requests to the server.

The image below shows a bit of what is loaded:

To better understand, press ESC when you open the page. You will cancel requests and the layout will not form.

As shown very well by @inkeliz in the comments, the standard Facebook layout is easy to assemble only with Html + css, as per this link show (not identical, but to understand).

Below I’ll show you a practical example of how to do this (without the server request, of course).

$(document).ready(function() {
  setInterval(function() {
    AlteraTimeline();
  }, 3000);
});

function AlteraTimeline() {
  $('#timeline').hide();
  $('body').append('<img src="http://www.creativebeacon.com/wp-content/uploads/2013/08/free-facebook-timeline-psd-2.jpg"/>');
}

.background-masker {
  background: #fff;
  position: absolute;
}
/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
  top: 0;
  left: 40px;
  right: 0;
  height: 10px;
}
.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
  top: 10px;
  left: 40px;
  height: 8px;
  width: 10px;
}
.background-masker.header-bottom {
  top: 18px;
  height: 6px;
}
.background-masker.subheader-left,
.background-masker.subheader-right {
  top: 24px;
  height: 6px;
}
.background-masker.header-right,
.background-masker.subheader-right {
  width: auto;
  left: 300px;
  right: 0;
}
.background-masker.subheader-right {
  left: 230px;
}
.background-masker.subheader-bottom {
  top: 30px;
  height: 10px;
}
.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
  top: 40px;
  left: 0;
  right: 0;
  height: 6px;
}
.background-masker.content-top {
  height: 20px;
}
.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end {
  width: auto;
  left: 380px;
  right: 0;
  top: 60px;
  height: 8px;
}
.background-masker.content-second-line {
  top: 68px;
}
.background-masker.content-second-end {
  left: 420px;
  top: 74px;
}
.background-masker.content-third-line {
  top: 82px;
}
.background-masker.content-third-end {
  left: 300px;
  top: 88px;
}
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}
.animated-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: 800px 104px;
  height: 96px;
  position: relative;
}
.timeline-item {
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
  padding: 12px;
  margin: 0 auto;
  max-width: 472px;
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="timeline-wrapper" id="timeline">
  <div class="timeline-item">
    <div class="animated-background">
      <div class="background-masker header-top"></div>
      <div class="background-masker header-left"></div>
      <div class="background-masker header-right"></div>
      <div class="background-masker header-bottom"></div>
      <div class="background-masker subheader-left"></div>
      <div class="background-masker subheader-right"></div>
      <div class="background-masker subheader-bottom"></div>
      <div class="background-masker content-top"></div>
      <div class="background-masker content-first-end"></div>
      <div class="background-masker content-second-line"></div>
      <div class="background-masker content-second-end"></div>
      <div class="background-masker content-third-line"></div>
      <div class="background-masker content-third-end"></div>
    </div>
  </div>
</div>

In this example I have the Facebook layout mentioned above, and a function to change the layout for an image. This function is with a time of 3 seconds, just to give more reality to the example.

Answer 2

One approach you can use is:

Have a div working as an overlay of every page displaying a loading gif.

<body> 
    <div class="loading"></div>
    [restante da pagina]
</body>

With the help of jquery, you can create a "system" for the onload event, when the event occurs you can disappear with the div "loading"

$(document).ready(function(){
// windows load

   $(window).on('load', function() {
     setTimeout(function(){
        $('.loading').removeClass('active');
      }, 300);
   });
});