forwardingJuejin. Cn/post / 684490…

preface

When loading network data, it is common to use a spinning loading animation or a Skeleton Screen placeholder to improve the user experience. Skeleton Screen is much more vivid and easy to implement than loading animations. You can implement a simple Skeleton Screen using CSS.

Train of thought

  • HTML skeleton
  • Add the CSS styles
  • The CSS and animation

Start by building a skeleton

The skeleton structure is simple, just throw in a few block-level elements as you like.

< div class = 'screen - root > < ul > < / li > < / li > < / li > < / ul > < / div > duplicate codeCopy the code

You see, it’s as simple as that.

CSS color

The skeleton screen that we often see looks something like this

To facilitate the description and enhance the contrast, I will make a ghoul version first

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

Linear-gradient () creates an image with a linear gradient of multiple colors. To learn more, see here

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

In practice, change the gradient image to the normal color, for example: background-image: Linear-gradient (90deg, # f2f2F2 25%, # e6e6E6 37%, # f2f2F2 63%)

Let’s get it moving

All that’s left to do is get the green in the middle moving

Can you think of a way to make it move?

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

li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; Height: 0.6 rem; 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%; }} Copy the codeCopy the code

The background-position property is set to two values, the first representing the horizontal offset relative to the container and the second representing the vertical offset relative to the container.

When setting background-position values using percentages, it performs a formula to calculate the actual position 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 position value, and the result is the actual offset. One of the purposes of setting the width of background-size to 400% is to create a width difference with the container.

If you set background-size to 50%, you can create a width difference with the container. Yes, but this way, the background image will tile the entire container, and you’ll be surprised to see that the green dot becomes a double.

You can try setting different values for background-size to see how it behaves and why.

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

@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; }} Copy the codeCopy the code

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

(100px-400px)*100% = -300px Copy the codeCopy the code

Last frame actual offset

(100px-400px)*0% = 0 Copy the codeCopy the code

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

The last step

Finally, don’t forget to change the background to a normal color…

The above code (github.com/skywangc/Sk…)

Author: feed feed how also someone link up: juejin.cn/post/684490… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.