【CSS tips 】【 Skeleton screen 】

Loading interface is not satisfied?

knowledge

• linear-gradient
• background

The solution

Use CSS background properties

1. Placed temporarily a<div>Tag, set the width and height

<div class="loading"></div>

.loading {
    width: 800px;
    height: 400px;
}
Copy the code

2. Arrange three gray lines

--skeleton-grey: hsl(0.0%.80%);
background-repeat: no-repeat;
background-image:
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%);
background-position: 
    0px 0px.0px 50px.0px 100px;
background-size: 
    200px 30px.400px 30px.400px 30px;
Copy the code

3. Add a white line and color the background white

--skeleton-grey: hsl(0.0%.80%);
background-repeat: no-repeat;
background-image:
    linear-gradient(100deg, transparent 30%.hsla(0.0%.100%.0.6) 40%.hsla(0.0%.100%.0.8) 50%.hsla(0.0%.100%.0.6) 60%, transparent 70%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%);
background-position:
    0px 0px.0px 0px.0px 50px.0px 100px;
background-size:
    150px 150px.200px 30px.400px 30px.400px 30px;
Copy the code

4. Let the white line move

animation: shine 1s infinite;
@keyframes shine {
    to {
        background-position:
            80% 0px.0px 0px.0px 50px.0px 100px; }}Copy the code

5. Adjust size, position, color, quantity and time

.loading {
    --skeleton-grey: hsl(0.0%.80%);
    width: 800px;
    height: 400px;
    background-repeat: no-repeat;
    background-color: white;
    background-image: linear-gradient(
        100deg,
        transparent 30%.hsla(0.0%.100%.0.3) 40%.hsla(0.0%.100%.0.7) 50%.hsla(0.0%.100%.0.3) 60%,
        transparent 70%
    ),
    linear-gradient(90deg.var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(90deg.var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(90deg.var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(90deg.var(--skeleton-grey), var(--skeleton-grey) 100%);
    background-position: -150px 0px.50px 50px.50px 100px.50px 150px.50px 200px;
    background-size: 150px 400px.200px 30px.500px 30px.400px 30px.300px 30px;
    animation: shine 1.5 s infinite;
    @keyframes shine {
        to {
            background-position: 650px 0px.50px 50px.50px 100px.50px 150px.50px 200px; }}}Copy the code