【CSS】 Skeleton screen effect

Hello, I’m Steven.

In order to avoid the page being too blank when loading data, many websites use this method to announce that the content will be loaded, so as to improve the user experience:

This effect is called Skeleton in Chinese and Skeleton in English, and I’m going to share with you how to achieve this effect in CSS.

This video version of the tutorial at www.bilibili.com/video/BV1Z5… , welcome the attention of sanlian!

Part of the HTML

Open the CodePen editor and add some structure to the HTML section, such as a card.

Add a new

Next for the title and text, add a new

Part of the CSS

Go to the CSS section and work on the style of the card first. Add the Body selector, set the background color to light gray, the font to Helvetica, and the text size to 15px, then use Flexbox style to center the content up, down, left and right.

Add the.card selector, set the width to 320px and the background color to white, so that the light gray of the background will make the white look better.

Add a little rounded corners, set it to 6px, since you will be adding images inside, to make the image can be rounded, set overflow to hidden, and add a shadow, very slight.

Then style the image container by adding the.image selector and setting the height to 200px. Then for the image inside, add the.image img selector and set display to block with a width of 100%. The height is inherited from the parent container and set to inherit. To maintain the scale of the image, set the object-fit to cover.

In the content section, add the.Content selector and set the padding to 2rem up and down and 1.8rem left and right; Add the h4 selector and set the style of the heading. Set margin to 0 on top, 0 on left, and 1rem on bottom. The text size and line spacing are set to 1.5rem.

Finally, the text, add the.description selector, set the text size to 1rem and the line spacing to 1.4rem, and the card is styled.

Make a skeleton screen

Go back to the HTML section and copy one more card, but empty the image and text, and add a class called Loading. We will apply the skeleton screen effect to this card.

Instituted Cards Go to the CSS section and change the reason-Content setting in Body to space-instituted so that both cards can evenly distribute white space.

Then, since I’ll be using the same gray in multiple places, I’ll define the gray as a CSS variable, add the :root selector, and set –loading-grey to light gray.

We have three locations where we need to add gray skeletons, namely the image, the title and the text. So set the background color of all three selectors to light gray.

Add the.loading h4 selector and set the style for the heading position. Set the min-height to 1.6rem and the rounded corners to 4px.

Add the.loading. description selector and style the position of the text. Here the height is set a bit more, min-height is set to 4rem, and the rounded corners are also set to 4px.

Animation part

Now that you have basically a static skeleton screen, let’s move on to the animation.

The skeleton screen animation looks like a beam of light sweeping from left to right, so I’ll set the background to a gradient color. Add background, set it to linear gradient(), and tilt the Angle a bit, set it to 100deg; Then by all transparent white, position at 40%; Gradient to translucent white at 50% position; To the transparent white, at 60 percent.

Then I added the base background color, light gray, and now I can see the beam.

So what I’m going to do is I’m going to double the width of this background, make it 200%, and keep it 100% high. In this way, the background displacement can be controlled by background-position, so as to achieve the effect of sweeping.

Now when background-position-x is set to 100%, the light will be on the left, and when background-position-x is set to 0%, the light will be on the right, so changing from a large number to a small number will result in a left-to-right sweep.

But that’s not enough. We need some buffer left and right to sweep the light in from the outside, so let’s change it to 120% first.

Then define a @keyframes named Loading, add to the block, and set background-position-x to -20%.

Add animation Settings, set to 1 second, animation name is Loading, acceleration is ease-in-out, and the number of repeats is infinite.

You can see that the sweep effect is already there, I want it to sweep in a little bit faster, a little bit more time, I can just change the original background-position-x to a larger value, say 180%, so the background has to move a little bit longer to get the effect.

And finally, a little bit of tweaking, the beam is slanted, how can you make the three grey beams look the same?

To do this, set the animation-delay of the title to.05s and the animation-delay of the text to.06s.

Let’s see how this case works

In practice, you only need to add loading class to the container when the data is loaded. After loading the data, display the data to the specified location and remove the loading class. There is no further introduction here.

Above, is this issue to introduce all the content.

Source code for this case is at codepen. IO /stevenlei/p…

Your support is my motivation, please pay attention to CodingStartup at least, let’s work together!

• B station: space.bilibili.com/451368848
• YouTube: youtube.com/codingstart…
• The Denver nuggets: juejin. Cn/user / 249773…