ラウンド可能なプログレスバーを作成するには？

Question

進捗バーを作ってみたい。しかし進捗バーはすべて水平になっていました。私の進行状況バーは半分にしたい。 HTML & CSSはどのように使用できますか？ click here for see the image of my wanted thing.

Answer 1

あなたは、私はそれを取ると、あなたがそれを表示するためにそれを簡素化on this post

例を見ることができます。あなたは円を増加または減少させるために回転のこの値で遊ぶことができYou can see it here.

：

.circle[data-anim~=right] { 
    -webkit-transform: rotate(50deg); 
} 

Answer 2

あなたはまた、国境半径と擬似要素を使用し、最終的には、遷移やアニメーション 下記の例やdemo使用することができます。

を

/* 10% = 18deg */ 
 

 
div { 
 
    text-align: center; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    color: #7F8C8C; 
 
    display: inline-block; 
 
    margin: 0 1em; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 

 
[data-progress] { 
 
    width: 120px; 
 
    height: 60px; 
 
    border-radius: 180px 180px 0 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: #76C7C0 
 
} 
 

 
[data-progress]:before { 
 
    content: attr(data-progress); 
 
    display: block; 
 
    margin: 18px; 
 
    background: white; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 50px; 
 
    font-weight: bold; 
 
    font-family: helvetica; 
 
    border-radius: inherit; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
[data-progress]:after { 
 
    content: ''; 
 
    background: #E2534B; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    height: 60px; 
 
    transform-origin: top center; 
 
    z-index:0; 
 
    border-radius:0 0 180px 180px ; 
 
    box-shadow: 0 0 5px black; 
 
} 
 

 
[data-progress="20"]:after { 
 
    transform: rotate(36deg); 
 
} 
 

 
[data-progress="50"]:after { 
 
    transform: rotate(90deg); 
 
} 
 

 
[data-progress="80"]:after { 
 
    transform: rotate(144deg); 
 
} 
 

 
[data-progress="100"]:after { 
 
    transform: rotate(180deg); 
 
} 
 
[data-progress="..."]:after { 
 
    animation:spin 4s infinite linear; 
 
} 
 

 
@keyframes spin { 
 
    to { 
 
    transform: rotate(360deg); 
 
} 
 
}

<div> 
 
    <p data-progress="20">20</p> 
 
    <p>progress 1 </p> 
 
</div> 
 

 
<div> 
 
    <p data-progress="50">50</p> 
 
    <p>progress 2 </p> 
 
</div> 
 
<div> 
 
    <p data-progress="80">80</p> 
 
    <p>progress 3 </p> 
 
</div> 
 
<div> 
 
    <p data-progress="100">100</p> 
 
    <p>progress 4 </p> 
 
</div> 
 
<div> 
 
    <p data-progress="...">In progress</p> 
 
    <p>loading</p> 
 
</div>