Img

What is a loading skeleton screen?

A loading skeleton screen is essentially a low-fidelity version of the final page UI. The skeleton blocks are usually animated and display the UI gradually as opposed to all at once upon complete load like loading spinners.

There are several advantages of using a skeleton loading screen:

  1. Clear indication of progress

    Because the UI gradually loads over time, there is a clear indication of the loading progress. Gradual progression examples include first displaying text or displaying the dominant colour of an image.

  2. Shifts attention from the wait time to the progress

    Gradually displaying the UI over time as opposed to just displaying a loading spinner helps to shift the user’s attention from the wait time to the actual loading progress.

  3. Perceived to be faster than actual

    Being able to see loading progress causes the user to perceive that the loading speed is faster than what it actually is.

  4. Final UI is not a surprise

    Since the skeleton loading screen is a barebones mockup of the final UI, users know what to expect.

Examples of loading skeleton screens

Img

Img

Img

Let’s build a loading skeleton screen!

According to research , here are the preferred characteristics of the loading skeleton block:

  • Animation: Wave
  • Direction: Left to right
  • Speed: Slow and steady
  • Colour: Light grey or a neutral colour for the skeleton blocks. For images, use the dominant colour of the image.

Ok, let’s start building it! If you don’t have a development environment set up, you could simply code in something like replit.com or codepen.io ✨

We will use this HTML structure:

<div class="container">
  <div class="avatar skeleton"></div>
  <div class="info">
    <div class="text skeleton"></div>
    <div class="text skeleton"></div>
  </div>
</div>

And apply these CSS styles (note the skeleton class):

.container {
  display: flex;
  align-items: center;
}

.skeleton {
  background: linear-gradient(90deg, #eee, #f9f9f9, #eee);
  animation: leftToRight 1.5s infinite reverse;
  background-size: 200%;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.info {
  margin-left: 10px;
}

.text {
  width: 100px;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 3px;
}

@keyframes leftToRight {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

Note, it is very important to pair background-position with background-size! Without background-size, the gradient would not move.

Using a linear gradient background with a larger background-size eg 200% creates an illusion of a moving gradient or background color. The gradient is initially positioned outside the element’s visible area, and as you animate the background-position, it appears as if the gradient is moving inside the element, creating the left to right animation effect. Cool right?! 😄