CSS実現円形プログレスバー

サンプル図

こうぞう

まず、親divは相対的に位置決めされ、内部には4つの半円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;
}

第2背景半円

を追加

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

は2番目の半円を追加し、1番目の半円は50%までしか回転できないので、残りの半分

を歩くには2番目の半円が必要です.

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

アニメーション関数を追加し、それぞれアニメーション関数を追加する.pr 1と.pr 2では、実際のニーズにおいて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);
  }
}

以上完了