This is the 28th day of my participation in the August Text 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
- The core is
Reduce animation time
- given
The specific time
- Tell the user
Why wait
- Make the waiting process less boring
Use fun animations
- Reduce the user’s psychological perception of waiting time
color
,Some relevant knowledge
,A product operation instruction
- Transparent communication of company brand image
Corporate philosophy
,Company values
,The company's mascot
The final result
Add HTML files
- Create a class name for the outermost layer
lds-roller
的div
- Put a couple of them inside
div
<div class="lds-roller">
<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
- Set up the
*
为box-sizing: border-box
- Set up the
body
Keep 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-roller {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-roller div {
animation: lds-roller 1.2 s cubic-bezier(0.5.0.0.5.1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: "";
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036 s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072 s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108 s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144 s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18 s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216 s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252 s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288 s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg); }}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.