• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Skeleton screen is a page that is displayed before the initial loading data of the page is not displayed. After the display page is rendered, the skeleton screen is hidden, which is equivalent to a loading page

I wrote it using UniApp, small program, APP, Vue page:

A simple structure will do

<template>
	<view class="list">
		<view class="lbt" v-if="lbt">
		</view>
		<view class="flex-s" v-if="klist">
			<view class="kapian" v-for=" i in 4">
			</view>
		</view>
		<view class="lists" v-for=" i in 4">
		</view>
	</view>
</template>
Copy the code

I’m going to use a CSS function here

The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;Copy the code
value describe
direction Specify the direction (or degrees) of the gradient with an Angle value. By default top to bottom, the to attribute is left to right;
color-stop1, color-stop2,… Used to specify the start and end colors of the gradient. 
<style lang="scss">
.lists {
			background: #eee;                /* Start at what degree to 25% is #eee and 37% is # FFF */
			background-image: linear-gradient(90deg.#eee 25%.#fff 37%.#eee 63%);
			width: 100%;
			height: 0.6 rem;
			list-style: none;
			background-size: 400% 100%;
			background-position: 100% 50%;
			animation: skeleton-loading 0.8 s infinite; /*infinite specifies an infinite number of animations */
				@keyframes loading {            /* Lower right middle */
                  0% {    background-position: 100% 50%;
                  }                             /* upper-left middle */
                  100% {    background-position: 0 50%;
                  }

                }
		}

</style>
Copy the code

The background-position property sets the starting position of the background image.

value describe
left top left center left bottom right top right center right bottom center top center center center bottom If you specify only one keyword, the other value will be “center”
x% y% The first value is horizontal and the second value is vertical. The top left corner is 0 percent. The bottom right corner is 100%. If only one value is specified, the other values will be 50%. The default value is 0% 0%
xpos ypos The first value is horizontal and the second value is vertical. The top left corner is 0. The units can be pixels (0px0px) or anything elseCSS unit. If only one value is specified, the other values will be 50%. You can mix % and positions
inherit Specifies that background-position property Settings should be inherited from the parent element

​

This is the rendering

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

One student will be selected from the comment section of each article to give a mug * 1