How to use CSS to realize circular progress bar
This article mainly introduces how to use CSS to achieve a circular progress bar, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
First, a parent div sets relative positioning, which contains four semicircle div and a small circle div for masking
Implementation steps
Write the basic html structure first
Parent div and content add style
.box {
Position: relative
}
.content {
Top: 10px
Left: 10px
Width: 100px
Height: 100px
Border-radius: 50%
Position: absolute
Background:red
Z-index: 5
}
Current effect:
Add the first background semicircle
.bg1 {
Position: absolute
Width: 60px
Height: 120px
Border-radius: 120px 0 0 120px
Z-index: 3
Background: sandybrown
}
Add a second background semicircle
.bg2 {
Left: 60px
Position: absolute
Width: 60px
Height: 120px
Border-radius: 0px 120px 120px 0
Z-index: 1
Background: sandybrown
}
Add the first progress semicircle. At this time, you can see the progress rotation by going to the page to adjust the angle of rotate.
.pr1 {
Position: absolute
Left: 60px
Width: 60px
Height: 120px
Border-radius: 0px 120px 120px 0px
Z-index: 2
Background: forestgreen
Transform: rotate (- 180deg)
Transform-origin: 0px 60px
}
If you add a second semicircle, the first semicircle can only be rotated to 50%, so you need a second semicircle to walk the other half.
.pr2 {
Position: absolute
Left: 60px
Border-radius: 0px 120px 120px 0px
Z-index: 4
Background: forestgreen
Transform: rotate (- 180deg)
Transform-origin: 0px 60px
}
Add animation functions. When animation functions are added to .pr1 and .pr2 respectively, js can be used to control the rotation angle of successive progress semicircles in the actual demand.
.pr1 {
...
Animation: pr1A 5s infinite linear forwards
}
.pr2 {
...
Animation: pr2A 5s infinite linear forwards
}
@ keyframes pr1A {
0% {
Transform: rotate (- 180deg)
}
50% {
Transform: rotate (0deg)
}
100% {
Transform: rotate (0deg)
}
}
@ keyframes pr2A {
0% {
Transform: rotate (- 180deg)
}
100% {
Width: 60px
Height: 120px
Transform: rotate (180deg)
}
}
Thank you for reading this article carefully. I hope the article "how to use CSS to achieve a circular progress bar" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
