Edit in JSRUN

console 命令行工具 X clear

                    
>
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%);
    }
  }
}