カスタム パーセンテージ ストップを使用して CSS プログレス サークルを作成するにはどうすればよいですか?

カスタム パーセンテージ ストップを使用して CSS プログレス サークルを作成する方法

円形のプログレス バーが必要なシナリオに遭遇する可能性がありますが、デフォルトのアニメーション化された円は 100% まで塗りつぶされます。仕様を満たしていません。この記事では、特定のパーセンテージ ポイントで停止できる CSS 進行状況サークルを作成する方法を説明します。

CSS の実装

私たちの目標は、CSS を使用して、特定のパーセンテージ ポイントでこの進行状況サークルを達成することです。パーセンテージが停止します。その方法は次のとおりです:

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function:linear;
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s;
  -webkit-animation-delay: 3s;
  -webkit-animation-name: close-wrapper;
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s;
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: right-spin;
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

HTML 構造

CSS を配置したら、次の HTML 構造を使用して進行状況サークルを作成できます:

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

このコードは、半円 (50%) から始まり、左側が 360 度、右側が回転する進行状況円を作成します。

結論

この CSS テクニックを使用すると、JavaScript を使用せずに、カスタムのパーセント停止を備えた円形のプログレス バーを作成できるようになりました。これにより、特定の要件を満たすカスタム進行状況インジケーターを設計するためのさまざまな可能性が開かれます。

以上がカスタム パーセンテージ ストップを使用して CSS プログレス サークルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。