円形のプログレス バーが必要なシナリオに遭遇する可能性がありますが、デフォルトのアニメーション化された円は 100% まで塗りつぶされます。仕様を満たしていません。この記事では、特定のパーセンテージ ポイントで停止できる 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); } }
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 サイトの他の関連記事を参照してください。