圓形進度條css

我想創建一個圓形條，隨着它的進展筆畫會變得越來越厚。
是否有可能使用css或svg，它可以在離子移動應用上運行。圓形進度條css

這裏是我想要的東西來實現：

，這裏是fiddle爲出發點：

.wrap { 
 
    background: #0b1626; 
 
    padding: 2em; 
 
    color: #FFF; 
 
    font-family: 'Arial Black'; 
 
} 
 
.knob { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    padding: 1.5em; 
 
    width: 220px; 
 
    height: 220px; 
 
    border-radius: 50%; 
 
    border: 1px solid #e84d51; 
 
} 
 
.knob .val { 
 
    padding-top: 1em; 
 
    font-size: 28px; 
 
    text-align: center; 
 
}

<div class="wrap"> 
 
    <div class="knob"> 
 
    <div class="stats"> 
 
     <p class="val">16,858<br>1,285</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-01-05 Saqueib

應該如何圓動畫
的一個實例？它是否應該轉過來？ –

它應該從0到100％時鐘明智的，應該停止一旦到達起點 – Saqueib

@Saqueib這並沒有回答這個問題。請提供顯示0％，50％和100％動畫狀態的插圖。 –

這裏是我的嘗試。有很多div，但我沒有時間去嘗試減少它們。

基本上，它在一個圓和另一個圓之間起着偏移作用。

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    position: relative; 
 
    background-color: black; 
 
} 
 

 
.left { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    right: 0px; 
 
    overflow: hidden; 
 
} 
 

 
.moving { 
 
    animation: rotatel 8s 1s linear forwards; /* to keep both animations the same */ 
 
} 
 

 
.left .moving { 
 
    position: absolute; 
 
    width: calc(200% - 70px); 
 
    height: calc(100% - 70px); 
 
    right: 15px; 
 
    top: 20px; 
 
    border: 20px solid transparent; 
 
    border-top-color: red; 
 
    border-right-color: red; 
 
    border-radius: 50%; 
 
    transform: rotate(-135deg); 
 
} 
 

 
@keyframes rotatel { 
 
    from {transform: rotate(-135deg);} 
 
    50%, 100% {transform: rotate(45deg);} 
 
} 
 

 
.right { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    left: 0px; 
 
    overflow: hidden; 
 
} 
 

 
.right .moving { 
 
    position: absolute; 
 
    width: calc(200% - 50px); 
 
    height: calc(100% - 50px); 
 
    left: 10px; 
 
    top: 0px; 
 
    border: 20px solid transparent; 
 
    border-top-color: red; 
 
    border-right-color: red; 
 
    border-radius: 50%; 
 
    transform: rotate(45deg); 
 
    animation-name: rotater; 
 
} 
 

 
@keyframes rotater { 
 
    0%, 50% {transform: rotate(45deg);} 
 
    100% {transform: rotate(225deg);} 
 
} 
 
.inner { 
 
    position: absolute; 
 
    width: calc(100% - 40px); 
 
    height: calc(100% - 40px); 
 
    border-radius: 50%; 
 
    background-color: white; 
 
    left: 20px; 
 
    top: 20px; 
 
    border: red solid 1px; 
 
    background-color: black; 
 
}

<div class="container"> 
 
<div class="left"> 
 
    <div class="moving"></div> 
 
</div> 
 
<div class="right"> 
 
    <div class="moving"></div> 
 
</div> 
 
<div class="inner"></div> 
 
</div>

順便說一句，關於一個div實現的基本形狀，使用邊界的一個pseudoelement

.test1 { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid red; 
 
    border-top-width: 1px; 
 
    border-right-width: 10px; 
 
    border-bottom-width: 20px; 
 
    border-left-width: 30px; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    margin: 40px; 
 
} 
 

 
.test1:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 0px solid green; 
 
    border-left-width: 30px; 
 
    border-top-width: 40px; 
 
    border-radius: 100% 0px 0px 0px; 
 
    position: absolute; 
 
    top: -40px; 
 
    left: -30px; 
 
}

<div class="test1"></div>

來源

2016-01-05 18:45:19 vals

看起來很酷，只想通過動畫停止一旦到達起點 – Saqueib

只需從動畫中刪除**無限**。它只會執行一次 – vals

不錯的一個。儘管我並沒有理解動畫的相同之處。 –

圓形進度條css

回答

相關問題