Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.