CSS 進行状況サークルを特定の割合で停止するにはどうすればよいですか?

CSS 進行状況サークル: 停止率の制御

CSS を使用すると、進行状況レベルを視覚的に示す進行状況サークルを作成できます。通常、100% 完了すると、進行状況バーが円全体を埋め尽くします。ただし、特定の割合で進行状況のサークルを停止する必要がある状況が発生する場合があります。

これを実現するには、CSS クリッピングとアニメーションを活用できます。フィドルで提供されるコードを分解してみましょう:

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

.wrapper クラスは、進行状況サークルを保持する外側のコンテナを定義します。幅と高さを 100px に設定し、絶対位置に配置します。重要なのは、クリップ プロパティを適用して進行状況バーの半分を非表示にすることです (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);
}

.wrapper 内で、.wrapper を使用して実際の進行状況サークルを作成します。サークルクラス。緑色の境界線と丸い角を使用して、希望のサイズとスタイルを与えます。もう 1 つの重要なクリップ プロパティは、コンテナの右半分内でのみ円を表示するために適用されます。

残りのコードは、CSS アニメーションとデータ属性を使用して、進行状況の円の動作を制御します。キーフレームのクリップ プロパティを調整することで、円の動きを特定のパーセンテージに制限できます。たとえば、フィドルでは、円が半回転して 50% で停止します。

これらのテクニックを組み合わせることで、アニメーション化されたループを使用せずに完了パーセンテージを動的に示す CSS 進行状況円を作成できます。

以上がCSS 進行状況サークルを特定の割合で停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。