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があります。私はあなたのニーズに合わせてそれを更新しました。

充填率は、充填値は

xが値である

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

を与える変更する.pure-css .semi.right .circleと.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>

に与えtransformrotate値によって決定されます0〜180の間（オプション）、180〜.semi.rightは円の半分を塗りつぶし、.semi-leftは180円になります。

パーセンテージ値に応じて充填する、< 50%を充填するためpercentage * 360/100 degに.semi.right .circleのtransformを設定し、充填するため>50%が.semi.left .circle to 180 - (percentage * 360/100) degの変換セット。フィル値

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