CSS circle-progress-bar

Question

我想在這裏使用進度條https://bootsnipp.com/snippets/featured/circle-progress-bar，但我不知道如何設置少於50％，當你有2,3種或更多類型（每個都有不同的百分比）這些代碼在你的網站上，因爲這個代碼設置了每個類型右邊的酒吧，我不知道該怎麼做，當我想要只有3％時，只有不到50％。

酒吧類型：

.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是這樣的：

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

哪裏yourAnimation是相同的引導例如.progress .progress-right .progress-bar共享右側的規則，除了名稱改變。

對於動畫37.5％，yourAnimation應該是這樣的：

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

下面是一個例子，其中.yourDiv是.yellow和yourAnimation是loading-3。

.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>