This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

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 you need to reprint can contact the author authorization

background

In the minds of users, a great app, tool, or website should be a well-made product that responds to their needs quickly. When I was releasing the first version of a product, I logged in to verify loading… The delay was 2-3 seconds, and as a result, the feedback email was flooded with users on the same day. Most users thought that these few seconds were an interface suddenly stuck or a software BUG. In fact, we were just verifying the 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 massive user churn.

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

Loading animation categories: progress bar loading animation, infinite loop loading animation and skeleton 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 teaching
  6. Pass the company brand image throughCorporate philosophy,Company Values,The company's mascot

The final result

1. Add HTML files

<div class="loader">Loading . . .</div>
Copy the code

Add CSS files

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyTo center the project
* {
  box-sizing: border-box;
}
body {
  display: flex;
  background: #eaecfa;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
Copy the code

Declare CSS global variables

  1. CSS global variables are declared in:rootIn the document root element, the syntax is--*
  2. The CSS global variable syntax isvar(--*)
:root{-color-loader: #ce4233;
}
Copy the code

The main CSS code

.loader {
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 900;
    color: var(--color-loader);
    letter-spacing: 0.2 em;
}

.loader::before..loader::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: var(--color-loader);
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
}

.loader::before {
    top: 0;
}

.loader::after {
    bottom: 0;
}


@keyframes load {
    0% {
        left: 0;
        width: 15px;
        height: 30px;
    }

    50% {
        width: 40px;
        height: 8px;
    }

    100% {
        left: 235px;
        width: 15px;
        height: 30px; }}Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.