Implement a simple skeleton screen using CSS

Preface

When loading network data, in order to improve the user experience, a loading animation that rotates in circles or a Skeleton Screen is usually used. Compared with loading animation, Skeleton Screen has a more vivid effect and is also very simple to implement. You can implement a simple Skeleton Screen using CSS. (What is Skeleton Screen?)

Recommended learning: CSS video tutorial, CSS tutorial (picture and text )

Ideas

• HTML skeleton

• CSS plus style

• CSS plus animation

Start by building the skeleton

The skeleton structure is very simple, just randomly place a few block-level elements you like and it’s ok.

<p class=&#39;screen-root&#39;>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul></p>

Look, it’s that simple.

CSS coloring

The skeleton screen we often see looks like this

For the convenience of description , to enhance the contrast, I will first make a ghost version of

First use the linear-gradient attribute of css to draw a red A gradient picture with a hint of green in the middle, and fill it as the background for the li tag

linear-gradient() can create a picture with a linear gradient of multiple colors. To learn more, you can read here

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

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

Let it move

The rest What we have to do is to make the green in the middle move

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 thereby calculate the different offset values ​​of the image relative to the container, thereby achieving 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%;
  }
}

Two values ​​are set here for the background-position attribute. The first value represents the offset of the horizontal position relative to the container, and the second value represents the offset of the vertical position relative to the container.

When using percentage to set the background-position value, it will perform a formula to calculate the actual positioning value (container width - image width) * (position x%) = (x offset value), that is, the width difference between the container and the image is multiplied by the set percentage positioning value. The result is the actual offset value. Set the width of background-size to one of 400% The purpose is to create a width difference with the container.

Some students may ask, setting the background-size value to 50% can also create a width difference from 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 a double.

You can try setting different values ​​for background-size, observe its performance, and think about why this happens.

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

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

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

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

The actual offset of the last frame

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

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

More related tutorial recommendations: "PHP Programming Introduction Tutorial"

The above is the detailed content of Implement a simple skeleton screen using CSS. For more information, please follow other related articles on the PHP Chinese website!