Progress Circle

_progress-circle.scss

.progress-circle-wrap {
  float: left;
  height: $padding * 4;
  position: absolute;
  left: 10%;
  top: 10%;
  width: $padding * 4;
  @include border-radius(50%);

  strong {
    position: absolute;
    left: 5px;
    top: 30px;
    width: 72px;
    height: 72px;
    @include font-size(21);
    line-height: $padding * 3.6;
    text-align: center;
    z-index: 3;
  }

  &__inner {
    background: $onboarding-bg;
    @include border-radius(50%);
    @include font-size(18);
    left: 5px;
    line-height: $padding * 3.6;
    height: $padding * 3.5;
    position: absolute;
    text-align: center;
    top: 5px;
    width: $padding * 3.5;
    z-index: 2;
  }

  $step: 1;
  $loops: round(100 / $step);
  $increment: (360 / $loops);
  $half: round($loops / 2);
  @for $i from 0 through $loops {
    &.progress-circle#{$i * $step} {
      @if $i < $half {
        $nextdeg: 90deg + ($increment * $i);
        background-image: linear-gradient(
            90deg,
            $circle-color 50%,
            transparent 50%,
            transparent
          ),
          linear-gradient($nextdeg, $teal 50%, $circle-color 50%, $circle-color);
      } @else {
        $nextdeg: -90deg + ($increment * ($i - $half));
        background-image: linear-gradient(
            $nextdeg,
            $teal 50%,
            transparent 50%,
            transparent
          ),
          linear-gradient(270deg, $teal 50%, $circle-color 50%, $circle-color);
      }
    }
  }
}

JSX:

<div className={`progress-circle-wrap progress-circle${percentCompleted}`}>
    <div className="progress-circle-wrap__inner">
        {percentCompleted}%
    </div>
</div>