How to use pure CSS to realize pulsating loader
This article will explain in detail how to use pure CSS to achieve similar pulsation loader. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
Code interpretation
Define the dom, and the container contains 10 child elements:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background:linear-gradient (# eee70%,pink)
}
Style the container, which is a circle with a pink background and stroke:
.loader {
Width:6em
Height:6em
Padding:3em
Font-size:10px
Background-color:pink
Border-radius:50%
Border:0.8emsolidhotpink
}
Set the layout of the child elements to tile horizontally:
.loader {
Display:flex
Align-items:center
Justify-content:space-between
}
Style the child elements:
.loader > span {
Width:0.5em
Height:50%
Background-color:deeppink
}
Add animation effects for child elements:
.loader > span {
Transform:scaleY (0.05) translateX (- 0.5em)
Animation:span-animate1.5sinfiniteease-in-out
}
@ keyframesspan-animate {
0% 100% {
Transform:scaleY (0.05) translateX (- 0.5em)
}
15% {
Transform:scaleY (1.2) translateX (1em)
}
90% par 100% {
Background-color:hotpink
}
}
Set the subscript for the child elements to play the animation in turn:
.loader > span {
Animation-delay:calc (var (--n) * 0.05s)
}
.loader > span:nth-child (1) {--n _ rig _ 1;}
.loader > span:nth-child (2) {--n _ rig 2;}
.loader > span:nth-child (3) {--n _ lug _ 3;}
.loader > span:nth-child (4) {--n _ vir 4;}
.loader > span:nth-child (5) {--n _ lug _ 5;}
.loader > span:nth-child (6) {--n _ lug 6;}
.loader > span:nth-child (7) {--n _ rig 7;}
.loader > span:nth-child (8) {--n _ lug 8;}
.loader > span:nth-child (9) {--n _ lug 9;}
.loader > span:nth-child (10) {--n _ lug 10;}
Add container animation to enhance the pulsation effect:
.loader {
Animation:loader-animate1.5sinfiniteease-in-out
}
@ keyframesloader-animate {
45% par 55% {
Transform:scale (1.05)
}
}
This is the end of this article on "how to use pure CSS to achieve similar pulsation loader". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
