Circular loading animation

This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

A good app, tool, or website should be well-made and responsive to users’ needs. When I was releasing the first version of a product, the loading of login verification… The delay was 2-3 seconds. As a result, the feedback mailbox was crowded by users on the same day. Most users thought that the interface suddenly froze and it was a software BUG, but in fact it was just us verifying login information. This is a very bad user experience, and while early adopters may give your product a second chance, the vast majority of them lose information about the product and don’t use it anymore, leading to a mass exodus of users.

Solution: Use load animations to provide even feedback and reduce user anxiety

Loading animation classification: progress bar loading animation, infinite loop loading animation and skeleton diagram loading animation

Excellent loading animation features

1. The core isReduce animation time
2. givenThe specific time
3. Tell the userWhy wait
4. Make the waiting process less boringUse fun animations
5. Reduce the user’s psychological perception of waiting timecolor,Some relevant knowledge,A product operation instruction
6. Transparent communication of company brand imageCorporate philosophy,Company values,The company's mascot

The final result

Add HTML files

1. Create a class name for the outermost layerlds-default 的 div
2. Put a couple of them insidediv

<div class="lds-default">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
Copy the code

2. Add the CSS file

Initialize the page first

1. Set up the* 为 box-sizing: border-box
2. Set up thebodyKeep the whole project centered

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background: #eaac83;
}
Copy the code

The main CSS code

.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-default div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: lds-default 1.2 s linear infinite;
}

.lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}

.lds-default div:nth-child(2) {
    animation-delay: -0.1 s;
    top: 22px;
    left: 62px;
}

.lds-default div:nth-child(3) {
    animation-delay: -0.2 s;
    top: 11px;
    left: 52px;
}

.lds-default div:nth-child(4) {
    animation-delay: -0.3 s;
    top: 7px;
    left: 37px;
}

.lds-default div:nth-child(5) {
    animation-delay: -0.4 s;
    top: 11px;
    left: 22px;
}

.lds-default div:nth-child(6) {
    animation-delay: -0.5 s;
    top: 22px;
    left: 11px;
}

.lds-default div:nth-child(7) {
    animation-delay: -0.6 s;
    top: 37px;
    left: 7px;
}

.lds-default div:nth-child(8) {
    animation-delay: -0.7 s;
    top: 52px;
    left: 11px;
}

.lds-default div:nth-child(9) {
    animation-delay: -0.8 s;
    top: 62px;
    left: 22px;
}

.lds-default div:nth-child(10) {
    animation-delay: -0.9 s;
    top: 66px;
    left: 37px;
}

.lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}

.lds-default div:nth-child(12) {
    animation-delay: -1.1 s;
    top: 52px;
    left: 62px;
}

@keyframes lds-default {

    0%.20%.80%.100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5); }}Copy the code

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.