JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<div class="progress--circle progress--85">
  <div class="progress__number">85</div>
</div>

SCSS

$spacing: 1rem;
$themeColor: #99001F;
$backColor: #ddd;
$textShadow: rgba(black, 0.35) 1px 1px 1px;

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #e7e7e7;
  color: #555;
  line-height: 1.4;
}

.progress--circle {
  position: relative;
  display: inline-block;
  margin: $spacing;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: $backColor;

  &:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: white;
  }

  &:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: $themeColor;
  }
}

.progress__number {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  width: 100%;
  line-height: 1;
  text-align: center;
  font-size: 1rem;
  color: #99001F;
}

$step: 5;
$loops: round(100 / $step);
$increment: 360 / $loops;
$half: round($loops / 2);

@for $i from 0 through $loops {
  .progress--circle.progress--#{$i * $step}:after {
    @if $i < $half {
      $nextDeg: 90deg + ($increment * $i);
      background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextDeg, $themeColor 50%, $backColor 50%, $backColor);
    }

    @else {
      $nextDeg: -90deg + ($increment * ($i - $half));
      background-image: linear-gradient($nextDeg, $themeColor 50%, transparent 50%, transparent), linear-gradient(270deg, $themeColor 50%, $backColor 50%, $backColor);
    }
  }
}