<div class="progress--circle progress--0">
  <div class="progress__number">0</div>
</div>
<div class="progress--circle progress--1">
  <div class="progress__number">1</div>
</div>
<div class="progress--circle progress--2">
  <div class="progress__number">2</div>
</div>
<div class="progress--circle progress--3">
  <div class="progress__number">3</div>
</div>
<div class="progress--circle progress--4">
  <div class="progress__number">4</div>
</div>
<div class="progress--circle progress--5">
  <div class="progress__number">5</div>
</div>
<div class="progress--circle progress--6">
  <div class="progress__number">6</div>
</div>
<div class="progress--circle progress--7">
  <div class="progress__number">7</div>
</div>
<div class="progress--circle progress--8">
  <div class="progress__number">8</div>
</div>
<div class="progress--circle progress--9">
  <div class="progress__number">9</div>
</div>
<div class="progress--circle progress--10">
  <div class="progress__number">10</div>
</div>
<div class="progress--circle progress--11">
  <div class="progress__number">11</div>
</div>
<div class="progress--circle progress--12">
  <div class="progress__number">12</div>
</div>
<div class="progress--circle progress--13">
  <div class="progress__number">13</div>
</div>
<div class="progress--circle progress--14">
  <div class="progress__number">14</div>
</div>
<div class="progress--circle progress--15">
  <div class="progress__number">15</div>
</div>
<div class="progress--circle progress--16">
  <div class="progress__number">16</div>
</div>
<div class="progress--circle progress--17">
  <div class="progress__number">17</div>
</div>
<div class="progress--circle progress--18">
  <div class="progress__number">18</div>
</div>
<div class="progress--circle progress--19">
  <div class="progress__number">19</div>
</div>
<div class="progress--circle progress--20">
  <div class="progress__number">20</div>
</div>
<div class="progress--circle progress--21">
  <div class="progress__number">21</div>
</div>

.progress--circle {
  position: relative;
  display: inline-block;
  margin: 1rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ddd;
}
.progress--circle:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: white;
}
.progress--circle:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #63b8ff;
}

.progress__number {
  position: absolute;
  top: 50%;
  width: 100%;
  line-height: 1;
  margin-top: -0.75rem;
  text-align: center;
  font-size: 1.5rem;
  color: #777;
}

.progress--pie:before {
  display: none;
  /* Get rid of white circle for "pie chart style" meter */
}
.progress--pie .progress__number {
  color: white;
  text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 1px;
}

.progress--circle.progress--0:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(90deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--1:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(106.36deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--2:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(122.7deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--3:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(139.08deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--4:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(155.44deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--5:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(171.8deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--6:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(188.16deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--7:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(204.52deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--8:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(220.88deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--9:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(237.24deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--10:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(253.6deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--11:after {
  background-image: linear-gradient(
      -73.6deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--12:after {
  background-image: linear-gradient(
      -57.24deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--13:after {
  background-image: linear-gradient(
      -40.88deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--14:after {
  background-image: linear-gradient(
      -24.52deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--15:after {
  background-image: linear-gradient(
      -8.16deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--16:after {
  background-image: linear-gradient(
      8.2deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--17:after {
  background-image: linear-gradient(
      24.56deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--18:after {
  background-image: linear-gradient(
      40.92deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--19:after {
  background-image: linear-gradient(
      57.28deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--20:after {
  background-image: linear-gradient(
      73.64deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

.progress--circle.progress--21:after {
  background-image: linear-gradient(
      90deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}