リングプログレスバーの実装(CSS 3+jQuery/Vue)

全体的な考え方は,切断(clip)により2つの半円を生成して静的な進捗バーを示し,その後回転(rotate)角度の変化により動的効果を生じる.
まず2つの基礎知識点を振り返ってみましょう
(1)cssの一般的でない属性:

clip: rect(top, right, bottom, left);

このプロパティは、topとbottomで指定されたオフセット量がエレメントボックスの上部エッジから計算され、rightとleftで指定されたオフセット量がエレメントボックスの左側エッジから計算される裁断矩形を規定します(ここで注意しなければならないのはbottomとrightの計算方法です).下のこの超はっきりした図を見てください(w 3 cplusの図を直接運んで、透かしを持って違反しないでしょう?):
clipプロパティは、要素が「position:absolute」または「position:fixed」プロパティを設定している場合にのみ使用できます.clipは「position:relative」と「position:static」の設定では動作しません.
clipについて、詳しく知りたいならこの文章を見てください.http://www.w3cplus.com/css3/c...
(2)CSSのもう一つの属性:

transform: rotate(deg);

時計回りに一定の角度を回す.
ウォーミングアップ:右半円を描きましょう

//html

    

    
0%

//css
.pie-right {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;//             
}
.right {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: blue;//              
}
.pie-right, .right {
    clip: rect(0, auto, auto, 100px);
}
.mask {//    
    position: absolute;
    top: 25px;
    left: 25px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

效果如下：

此时，元素pie-right完全被元素right遮住了。

然后，我们来旋转一下：

.right {
    transform: rotate(30deg);
}

回転後の効果は次のとおりです.
30度回転すると、露出した赤い部分が私たちの進捗状況であり、pie-right要素の色であることがわかります.青い部分のright要素の色は、私たちがまだ到着していない進度です.
本番
リングプログレスバーを実現するには、左右の2つの半円が必要であることを意味します.html構造を変更します.

//html


    

        

    
    

        

    
    
0%


//css
.circle {//              
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;//             
}
.pie-right, .pie-left { //                  ，          clip     
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.right, .left {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: blue;//              
}
.pie-right, .right { //      
    clip: rect(0, auto, auto, 100px);
}
.pie-left, .left { //      
    clip: rect(0, 100px, auto, 0);
}
.mask {//     mask       
    position: absolute;
    top: 25px;
    left: 25px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

效果是介样滴：

此时进度是0，让我们来rotate一下，先旋转30度吧

.right{
    transform: rotate(30deg);
}

「赤い部分が現在の進捗であることを常に覚えておいてください」というようになりました.
次に210度回転して効果を見ます【210度は右が完全に回転し、左が30度回転します】:

.right{
    transform: rotate(180deg);
}
.left{
    transform: rotate(30deg);
}

次のようになります.
最後の最後に,進捗数値が動的に増加するとjsにより回転角度を変えることで進捗バーの動的変化を実現できる.進捗値が1増加するごとに角度が3.6度増加し、進捗が50%未満の場合、左側の進捗バーは変化せず、50%を超えると左側の進捗バーが変化し始めることに注意してください.関数を書くことができます.

function changeProcess(value) {
    var num = value * 3.6;
    if(num < 180) {
        $('.right').css('transform', 'rotate(' + num + 'deg)');
    } else {
        $('.right').css('transform', 'rotate(180deg)');
        $('.left').css('transform', 'rotate(' + (num-180) + 'deg)');
    }
}

進捗値が変化した場合、この関数を呼び出せばいいです.
jsfiddleデモ
まめにjsfiddleに書いてみました(これはjQueryの実現です):jsfiddle
これはVueの実装です:Vueリング進捗バー.Vueのバインドインラインスタイルを使用します.
参考記事:jQueryとCSSによるリングプログレスバーhttps://www.w3cplus.com/css3/...