CSS 원형 진행률 막대 구현

예도
구조
첫 번째 부모div 설정은 상대적인 위치를 설정합니다. 내부에는 네 개의 반원div와 마스크를 위한 작은 원div가 포함되어 있습니다.
실현 절차

기본 html 구조를 먼저 쓴다

• 父级div和content添加样式

.box{
  position: relative;
}
.content {
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background:red;
  z-index: 5;
}

현재 효과:

첫 번째 배경 반원 추가

.bg1{
  position: absolute;
  width: 60px;
  height: 120px;
  border-radius: 120px 0 0 120px;
  z-index: 3;
  background: sandybrown;
}

보조 배경 반원 추가

.bg2{
  left: 60px;
  position: absolute;
  width: 60px;
  height: 120px;
  border-radius: 0px 120px 120px 0;
  z-index: 1;
  background: sandybrown;
}

첫 번째 진도 반원을 추가합니다. 이때 페이지에 가서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;
}

두 번째 반원을 추가하면 첫 번째 반원은 50%까지만 회전할 수 있기 때문에 두 번째 반원이 나머지 반을 걸어야 한다

.pr2 {
  position: absolute;
  left: 60px;
  border-radius: 0px 120px 120px 0px;
  z-index: 4;
  background: forestgreen;
  transform: rotate(-180deg);
  transform-origin: 0px 60px;
}

애니메이션 함수를 추가하고 각각 애니메이션 함수를 추가합니다.pr1 및.pr2에서 실제 수요에서 js로 진도 반원의 회전 각도를 제어할 수 있다

.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);
  }
}

이상 완료