在CSS中創建進度輪

Question

我想在html和css中創建一個進度輪，如果有必要，也可以使用jQuery。我創建了一個輪子，但問題是如何根據給定的百分比設置邊框的長度。
這裏是代碼：

.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    height: 120px; 
 
}

<div class="loader"></div>

它在其上創建一個圓圈，藍色邊框，但我要像下面的圖片。

Answer 1

這是我做的radial progress bar。我已經更新它以滿足您的需求。

填充百分比通過並給予.pure-css .semi.right .circle的transformrotate值.pure-css .semi.left .circle

.pure-css { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    position: relative; 
 
    color: #fff; 
 
} 
 

 
.pure-css .semi { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    overflow: hidden; 
 
    z-index:2; 
 
    transform:rotate(30deg) 
 
} 
 

 
.pure-css .semi.left{ 
 
    transform-origin:100% 50%; 
 
} 
 
.pure-css .semi.right{ 
 
    transform-origin:0% 50%; 
 
} 
 
.pure-css .semi.right .circle { 
 
    border-top-left-radius: 150px; 
 
    border-bottom-left-radius: 150px; 
 
    border-right: 0; 
 
    transform: rotate(181deg) translate(-100%, 0); 
 
    animation: rotate 4s linear forwards; 
 
    transform-origin: 0% 50%; 
 
} 
 

 
.pure-css .semi.left .circle { 
 
    border-top-right-radius: 150px; 
 
    border-bottom-right-radius: 150px; 
 
    border-left: 0; 
 
    transform: rotate(36deg) translate(100%, 0); 
 
    animation: rotate2 4s linear forwards; 
 
    transform-origin: 100% 50%; 
 
    animation-delay: 42s; 
 
} 
 

 
.pure-css .semi .circle { 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border: 50px solid #4ec9aa; 
 
} 
 

 
.pure-css .text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    font-size: 28px; 
 
    color:#28645d; 
 
    text-align:center; 
 
} 
 
.pure-css .shade { 
 
    width: 100%; 
 
    height: 100%; 
 
    transform:scale(.9,.9); 
 
    border-radius: 50%; 
 
    box-sizing: border-box; 
 
    border: 30px solid #e7ebee; 
 
}

<div class="rp"> 
 
    <div class="pure-css"> 
 
     <div class="semi left"> 
 
     <div class="circle"></div> 
 
     </div> 
 
     <div class="semi right"> 
 
     <div class="circle"></div> 
 
     </div> 
 
     <div class="text"> 
 
     <span class="num">Goal<br><b>20,000$</b></span> 
 
     </div> 
 
     <div class="shade"></div> 
 
    </div> 
 
    </div>

確定要改變填充值給

.pure-css .semi.left .circle{ 
    transform: rotate(xdeg) translate(-100%, 0); 
} 
.pure-css .semi.right.circle{ 
    transform: rotate(xdeg) translate(-100%, 0); 
} 

其中x是一個值在0和180之間（可選）給180至.semi.right將填充一半的圓圈，180到.semi-left將填滿整個圓圈。

爲了根據一個百分比值填補，填補< 50%設置的.semi.right .circle的transform到percentage * 360/100 deg和用於填充>50%設置的轉換的.semi.left .circle to 180 - (percentage * 360/100) deg。

爲了確定填充值

.pure-css .semi { 
    transform:rotate(xdeg) 
}