Speaking of the loading effect, everyone is familiar with it. It is widely used in mobile terminals, PC terminals, and various apps. The use of loading animation can significantly improve the user's interactive physical examination, especially when the page loading speed is relatively slow. In the case of , the role of loading animation is even more prominent. It is not difficult to realize a personalized loading animation effect. The main principle is to use the css3 animation property -animation combined with the transform property. This chapter combines the code to briefly record the implementation process of loading animation
1. The loading effect of the basic version, as shown in the figure
This type of loading animation has an obvious feature - rotating around the center point. For this type of loading animation, we can use static pictures, text or svg tags, etc. to achieve the element rotation effect through animation keyframes. The specific effect see code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
width: 600px;
height: 200px;
}
.loading-box {
width: 100px;
height: 100px;
background-size: 100% 100%;
animation: loading 2s linear infinite;
}
@keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(1turn);
}
}
.container>div:nth-child(1) {
background-image: url('./images/loading1.png');
}
.container>div:nth-child(2) {
background-image: url('./images/loading2.png');
}
.container>div:nth-child(3) {
background-image: url('./images/loading3.png');
}
.container>div:nth-child(4) {
background-image: url('./images/loading4.png');
}
</style>
</head>
<body>
<div class="container">
<div class="loading-box"></div>
<div class="loading-box"></div>
<div class="loading-box"></div>
<div class="loading-box"></div>
</div>
</body>
</html>2. Enhanced version of loading animation, the effect is as shown in the figure
This type of animation consists of several points forming a circle, and the circle achieves orderly scaling, which seems to have the effect of rotating around the center point. The implementation process is shown in the figure below:
The implementation process can be divided into 6 steps:
- Provide an element as an animation container, add 12 rectangular boxes inside the element, and use positioning to fix the rectangular box at the specified position, and get Figure 1
- Set the rotation center of the rectangular frame to the middle left position, and rotate the rectangular frame by a specified angle in turn, 12 rectangular frames (the rotation angle of each rectangular frame is increased by 30 degrees on the basis of the previous one), and Figure 2 is obtained
- Add small dots in the rectangular frame, and let the small dots occupy the end position of the rectangular frame, get Figure 3
- Add an animation frame for each small dot, so that the animation start time of each small dot is delayed in an orderly manner, and animation-delay can be set to a negative number - indicating how long the animation has been executed, as shown in Figure 4
- Remove the border of the rectangular frame to get a loading animation D, as shown in Figure 5
- By adding a filter effect to the ball, the effect of the color change of the ball during motion can be achieved (the background color of the ball cannot be pure white or pure black at this time), and Figure 6 is obtained
The implementation code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
}
.container>div {
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
width: 50%;
height: 20px;
transform-origin: left center;
}
.container>div::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
/* background-color: #000; */
transform: var(--scale);
animation: dotscale 1.2s linear infinite;
animation-delay: var(--animation-delay);
}
.container>div:nth-child(1) {
transform: rotate(0deg);
--animation-delay: 0s;
}
.container>div:nth-child(2) {
transform: rotate(30deg);
--animation-delay: -0.1s;
}
.container>div:nth-child(3) {
transform: rotate(60deg);
--animation-delay: -0.2s;
}
.container>div:nth-child(4) {
transform: rotate(90deg);
--animation-delay: -0.3s;
}
.container>div:nth-child(5) {
transform: rotate(120deg);
--animation-delay: -0.4s;
}
.container>div:nth-child(6) {
transform: rotate(150deg);
--animation-delay: -0.5s;
}
.container>div:nth-child(7) {
transform: rotate(180deg);
--animation-delay: -0.6s;
}
.container>div:nth-child(8) {
transform: rotate(210deg);
--animation-delay: -0.7s;
}
.container>div:nth-child(9) {
transform: rotate(240deg);
--animation-delay: -0.8s;
}
.container>div:nth-child(10) {
transform: rotate(270deg);
--animation-delay: -0.9s;
}
.container>div:nth-child(11) {
transform: rotate(300deg);
--animation-delay: -1s;
}
.container>div:nth-child(12) {
transform: rotate(330deg);
--animation-delay: -1.1s;
}
@keyframes dotscale {
0% {
transform: scale(1);
filter: hue-rotate(0deg);
}
100% {
transform: scale(0);
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<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>
</body>
</html>