How does Facebook generate the animated placeholder news items?

Question

Facebook has a "loading" screen that animates in a particular way when waiting for everything to download. The colors alternate from grey to light grey

I looked at all the downloaded images, but can't find it, so I assume this is a CSS trick.

Can anyone tell me how this is accomplished (and better still, what process did you use to identify the location of this loading screen?)

Answer 1

This is fairly easy to accomplish and what you just seeing there is nothing more than a collection of white div elements masking an animated background which works in this very same way (excuse my poor drawing):

If you know how stencil graffiti works then should be fairly easy to grasp the concept behind this.

You couldn't identify images because there are no actual animated images, but just a gray background with an css animation, this is their actual first layer with the masking elements hidden:

As you can see it is nothing more than a div with a CSS3 animated gradient, below here's the CSS rules they are using for it.

._2iwq {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  background: #f6f7f8;
  background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
  background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  height: 104px;
  position: relative;
}

@-webkit-keyframes placeHolderShimmer {
  0% {
     background-position:-468px 0
    }
  100% {
     background-position:468px 0
    }
}

As per the second layer(s) they are using a bunch of div elements inside the background container and positioned all absolutely, just masking the parts the user isn't supposed to see.

So what's left for you to see are mere "holes" or "spaces" left between the various div elements, which gives you the illusion to see the animated background below to be one single element sitting on the top.

You could accomplish the same more easily by putting a png mask over the element but requires time to load unless you use an inline image of course (but hey, no one likes unreadable stuff in their markup and hard to change) so I think why Facebook chose to go for the only markup way.

To identify those elements you can hang your browser by pressing escape while the elements are loading, leaving you with an unfinished page which you then can look around and inspect with your favourite devtools of choice - on Chrome, clicking the magnifying glass and then click on the element you would like to inspect makes the devtool jump straight to the element you have just selected.

However keep in mind, with the advent of js client-side frameworks such as Angular this trick might not work, (especially if the javascript has been already loaded and you want to halt the execution between route changes) in that case you have to halt your browser using the built-in debugger/breakpoints.