CSS circle-progress-bar

Question

https://bootsnipp.com/snippets/featured/circle-progress-barでプログレスバーを使用したいのですが、2、3種類以上のタイプ（それぞれ異なる割合がある）がある場合は50％未満に設定する方法はわかりません。あなたのウェブサイト上にあるこれらのコードは、このコードがそこにあるすべてのタイプのバーの右側を設定し、50％未満を3にしたいときに何をすべきかわからないからです。

バーのタイプ：

.progress .progress-right .progress-bar{ 
    left: -100%; 
    border-top-left-radius: 80px; 
    border-bottom-left-radius: 80px; 
    border-right: 0; 
    -webkit-transform-origin: center right; 
    transform-origin: center right; 
    animation: loading-1 1.8s linear forwards; 
} 

+ 

    @keyframes loading-1{ 
    0%{ 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100%{ 
     -webkit-transform: rotate(180deg); 
     transform: rotate(180deg); 
    } 

誰かが私を助けてくれますか？

Answer 1

右側のアニメーションはすべての進行中のサークルで共有されるため、50％未満のアニメーションを作成する場合は、そのジェネリックスタイルをオーバーライドする必要があります。次に、左側のアニメーションは必要ありません。

だからあなたのCSSは次のようなものになるだろう：

名が変更された以外 yourAnimationは、ブートストラップの例で .progress .progress-right .progress-barの共有右側のルールと同じです

.progress.yourDiv .progress-right .progress-bar { 
    animation: yourAnimation 1.8s linear forwards; 
} 
.progress.yourDiv .progress-left .progress-bar{ 
    animation: none; 
} 

。 37.5％のアニメーションのため

、 yourAnimationは次のようになります。 .yourDivは .yellowと yourAnimationが loading-3である場合

@keyframes yourAnimation{ 
    0%{ 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100%{ 
     -webkit-transform: rotate(135deg); 
     transform: rotate(135deg); 
    } 
} 

はここでは、例です。

.progress { 
 
    width: 150px; 
 
    height: 150px !important; 
 
    float: left; 
 
    line-height: 150px; 
 
    background: none; 
 
    margin: 20px; 
 
    box-shadow: none; 
 
    position: relative; 
 
} 
 
.progress:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    border: 12px solid #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.progress>span { 
 
    width: 50%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
.progress .progress-left { 
 
    left: 0; 
 
} 
 
.progress .progress-bar { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: none; 
 
    border-width: 12px; 
 
    border-style: solid; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.progress .progress-left .progress-bar { 
 
    left: 100%; 
 
    border-top-right-radius: 80px; 
 
    border-bottom-right-radius: 80px; 
 
    border-left: 0; 
 
    -webkit-transform-origin: center left; 
 
    transform-origin: center left; 
 
} 
 
.progress .progress-right { 
 
    right: 0; 
 
} 
 
.progress .progress-right .progress-bar { 
 
    left: -100%; 
 
    border-top-left-radius: 80px; 
 
    border-bottom-left-radius: 80px; 
 
    border-right: 0; 
 
    -webkit-transform-origin: center right; 
 
    transform-origin: center right; 
 
    animation: loading-1 1.8s linear forwards; 
 
} 
 
.progress .progress-value { 
 
    width: 90%; 
 
    height: 90%; 
 
    border-radius: 50%; 
 
    background: #44484b; 
 
    font-size: 24px; 
 
    color: #fff; 
 
    line-height: 135px; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
} 
 
.progress.blue .progress-bar { 
 
    border-color: #049dff; 
 
} 
 
.progress.blue .progress-left .progress-bar { 
 
    animation: loading-2 1.5s linear forwards 1.8s; 
 
} 
 
.progress.yellow .progress-bar { 
 
    border-color: #fdba04; 
 
} 
 
.progress.yellow .progress-right .progress-bar { 
 
    animation: loading-3 1.8s linear forwards; 
 
} 
 
.progress.yellow .progress-left .progress-bar { 
 
    animation: none; 
 
} 
 
@keyframes loading-1 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    } 
 
} 
 
@keyframes loading-2 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(144deg); 
 
    transform: rotate(144deg); 
 
    } 
 
} 
 
@keyframes loading-3 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
    } 
 
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 

 
<div class="progress blue"> 
 
    <span class="progress-left"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <span class="progress-right"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <div class="progress-value">90%</div> 
 
</div> 
 

 
<div class="col-md-3 col-sm-6"> 
 
    <div class="progress yellow"> 
 
    <span class="progress-left"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <span class="progress-right"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <div class="progress-value">37.5%</div> 
 
    </div> 
 
</div>