Döndürülebilir ilerleme çubuğu nasıl yapılır?

Question

Bir ilerleme çubuğu oluşturmak istiyorum. Ancak tüm ilerleme çubuğu yatay olarak yapıldı. İlerleme çubuğumun yarım tur yapılmasını istiyorum. HTML & CSS kullanarak nasıl mümkündür? click here for see the image of my wanted thing.

Answer 1

Sen onu alıp bunu göstermek için basitleştirmek bir örnek on this post

görebilirsiniz. You can see it here.

artırabilir ya da daire azaltmak için döndürme bu değer ile oynayabilir

:

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

Answer 2

da sınır yarıçap ve sahte elemanları kullanabilir ve sonunda Aşağıdaki örnek, ya da demo geçiş veya animasyon kullanımı:

/* 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>