console
<div class="radialProgressBar progress-0">
<div class="overlay">0</div>
</div>
<div class="radialProgressBar progress-10">
<div class="overlay">10</div>
</div>
<div class="radialProgressBar progress-20">
<div class="overlay">20</div>
</div>
<div class="radialProgressBar progress-30">
<div class="overlay">30</div>
</div>
<div class="radialProgressBar progress-40">
<div class="overlay">40</div>
</div>
<div class="radialProgressBar progress-50">
<div class="overlay">50</div>
</div>
<div class="radialProgressBar progress-60">
<div class="overlay">60</div>
</div>
<div class="radialProgressBar progress-70">
<div class="overlay">70</div>
</div>
<div class="radialProgressBar progress-80">
<div class="overlay">80</div>
</div>
<div class="radialProgressBar progress-90">
<div class="overlay">90</div>
</div>
<div class="radialProgressBar progress-100">
<div class="overlay">100</div>
</div>
$blue: #028cd5;
$gray: #ddd;
* {
box-sizing: border-box;
}
body {
display: flex;
flex-flow: row wrap;
}
.radialProgressBar {
border-radius: 50%;
transform: translate(50%,50%);
width: 100px;
height: 100px;
display: flex;
background: $gray;
margin: 20px;
.overlay {
border-radius: 50%;
width: 80px;
height: 80px;
margin: auto;
background: #fff;
text-align: center;
padding-top: 30%;
}
}
@for $i from 0 through 10 {
.progress-#{$i * 10} {
@if $i <= 5 {
background-image: linear-gradient(90deg - ($i * 36), $gray 50%, transparent 50%), linear-gradient(90deg, $blue 50%, $gray 50%);
}
@else {
background-image: linear-gradient(90deg, $blue 50%, transparent 50%), linear-gradient(90deg - ($i * 36 - 180), $blue 50%, $gray 50%);
}
}
}