circle progress bar css

Question

Я хочу создать круг, штрих которого будет увеличиваться по мере его продвижения.
Возможно ли использовать css или svg, который может работать на ионном мобильном приложении.

Вот что я хочу добиться:

и вот 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>

Answer 1

Вот моя попытка. Существует много разделов, но у меня не было времени, чтобы попытаться их уменьшить.

В основном, он воспроизводит смещения между одним кругом и другим.

.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>

Как и в сторону, exmple о достижении основной формы в 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>