CSS to achieve Skeleton Screen effect

When loading network data, in order to improve the user experience, a circular loading animation is usually used, or a Skeleton Screen is used as a placeholder. Compared with the loading animation, the Skeleton Screen effect is more vivid and easier to implement. A simple Skeleton Screen can be implemented using CSS.

Ideas

• HTML skeleton
• CSS style
• CSS plus animation

Start by building the skeleton

The skeleton structure is very simple, just put a few block-level elements you like in it.

<div class='screen-root'>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul>
</div>

You see, it’s that simple.

CSS Coloring

The skeleton screen we often see looks like this

In order to facilitate description and enhance contrast, I will first make a ghost version

First, use the CSS linear-gradient property to draw a gradient image with a hint of green in red, and use it as the background fill for li

Label

linear-gradient() can create a linear gradient image with multiple colors. For more information, see here

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
} 

In actual use, replace the gradient image with a normal color, such as: background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

Make it move

All that's left to do is animate the green in the middle

Can you think of any way to make it move?

What is used here is to stretch the background image, dynamically set the background positioning percentage, change the background positioning, and thus calculate the different offset values ​​of the image relative to the container, so as to achieve the animation effect.

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

Here, two values ​​are set for background-position property. The first value represents the horizontal offset relative to the container, and the second represents the vertical offset relative to the container.

When you use a percentage to set background-position value, it will execute a formula to calculate the actual positioning value (container width - image width) * (position x%) = (x offset value) is multiplied by the set percentage positioning value. The result is the actual offset value. One of the purposes of setting background-size width to 400% is to create a width difference with the container.

Some students may ask, setting background-size value to 50% can also create a width difference with the container. Yes, but in this way, the background image will tile the entire container, and you will be surprised to find that the green dot becomes double.

You can try setting different values ​​for background-size, observe how it behaves, and think about why it happens.

Finally, use the keyframe animation to set background-position value at the x coordinate from 100% to 0%

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

Assuming the container width is 100px , then the background image width is 400px . Using the above formula, in the first frame of the animation, the actual value of the background image offset relative to the container is

(100px-400px)*100% = -300px

The actual offset of the last frame

(100px-400px)*0% = 0

The animation process is actually the process of a linear background image that is 3 times the width of the container and its offset relative to the container changes from -300px to 0 .

Summarize

This is the end of this article about how to implement Skeleton Screen with CSS. For more information about how to implement Skeleton Screen with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!