This article will share with you 8 tips for implementing loading effects with CSS. I hope it will be helpful to you!
loader-1
This should be the simplest CSS loading. There is a red arc on the circle. If you observe carefully, you will find that this arc is exactly 1/4.
Implementation logic:
A container with equal width and height, set the border to white. Then set the red color to the bottom,
When the border-radius is set to 50%, then he can just become a circle.
Add a rotation animation to the circle. The animation of the rotation angle in CSS is rotate(), we only need to set it from 0 to 360. (This animation will be used many times below, so I won’t repeat it below, it’s shared)
@-webkit-keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}Complete code
.loader-1 {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}loader-2
Observation: There is a circle on the outside, and there is a red element rotating inside.
Implement logic
A container of equal width and height, with white sides and 50% rounded corners. This is the outer circle.
How is the red color inside achieved? There are two ideas here. 1; Add a small div, put it inside, and set a red bottom border like loader-1. 2: Use ::after, the idea is the same as method 1.
Add rotation animation.
Complete code
.loader-2 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-2:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}loader-3
Observation: The inside is a circle, and the outside is a red arc.
Implement logic
This loading effect is consistent with loader-2, the difference is that the red arc is inside and outside.
Complete code
.loader-3 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-3:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}loader-4
Observation: There is a circle on the outside and two circles on the inside. These two circles are exactly symmetrical.
Implement logic
A container of equal width and height, with white sides and 50% rounded corners. This is the outer circle.
How is the red color inside achieved? There are two ideas here. 1; Add two small divs, set the background color to red, and then set the corners to 50%, so that they look like two small dots. 2: Use ::after and ::before, the idea is the same as method 1.
Add rotation animation.
Complete code
.loader-4 {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-4:before {
left: auto;
top: auto;
right: 0;
bottom: 0;
content: "";
position: absolute;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(-150%, -150%);
border-radius: 50%;
}
.loader-4:after {
content: "";
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(150%, 150%);
border-radius: 50%;
}loader-5
Observation: There are three layers in total, the outermost white circle, the middle red circle, and the inner white circle. Each circle has a half-arc notch, and the outer circle and the innermost circle rotate in the same direction.
Implement logic
A container of equal width and height, with white sides and 50% rounded corners. This is the outer circle.
The problem here is that how to realize the gap of the circle is actually very simple. There is an attribute value in css: transparent , use this value to set the border to be transparent, and the gap can be realized.
For the inner red and white arcs, continue to use ::after and ::before.
Plus animation, here is an animation of rotation in the opposite direction ( rotationBack ). The rotation is set to a negative angle here, and the rotation can be rotated in the opposite direction.
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}Complete code
.loader-5 {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent transparent;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-5:before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
-webkit-animation: rotation 1.5s linear infinite;
animation: rotation 1.5s linear infinite;
}
.loader-5:after, .loader-5:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #FF3D00 #FF3D00;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-animation: rotationBack 0.5s linear infinite;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center; *
}loader-6
Observation: It looks like a clock with a pointer inside a circle.
Implement logic
A container of equal width and height, with white sides and 50% rounded corners. This is the outer circle.
How the pointer is implemented: From here on, we will no longer discuss the situation of adding new divs . In fact, the red pointer is a simple container with inconsistent width and height.
Complete code
.loader-6 {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-6:after {
content: "";
position: absolute;
left: 50%;
top: 0;
background: #FF3D00;
width: 3px;
height: 24px;
transform: translateX(-50%);
}loader-7
Observation: First determine a few circles, two in total. When the first circle has not disappeared, the second circle has appeared. Finally, an effect similar to water waves appeared. Also note that the two circles are the same size because they eventually disappear at the same place.
Implement logic
First determine whether the two circles are on the container. The above has been adding a border to the container. Of course, this example is also possible, but for the sake of simplicity, we put these two circles in ::after and ::before.
With animation, the circle here is gradually enlarged. In CSS, scale is used to enlarge and shrink elements. At the same time, in order to achieve the effect of gradually clearing the ripples, we add transparency.
@keyframes animloader7 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}Complete code
Here, because the two circles appear one after another, one circle plus delay is needed.
.loader-7 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader-7::after, .loader--7::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}
.loader-7::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.loader-7::after, .loader-7::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}loader-8
Observe: an arc plus a triangle.
Implement logic
A container of equal width and height, with white sides and 50% rounded corners. This is the outer circle.
transparent , use this value to set transparency for the border to realize the gap.
Create arrows on :after. In CSS, we have many ways to realize triangles, the simplest of which is to use border, which does not need to set the width and height of the element, but only needs to set the size of the border, and only set the color on one side.
border: 10px solid transparent;
border-right-color: #FFFAdd rotation animation.
Complete code
.loader-8 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-8:after {
content: "";
position: absolute;
left: 20px;
top: 31px;
border: 10px solid transparent;
border-right-color: #FFF;
transform: rotate(-40deg);
}