Circular graphs by percentage value using mixin

progress-circle.html

      <div class="progress-circle__container">
        <div class="progress-circle__item">
          <div class="progress-circle__graph">
            <div class="progress-circle__radial progress-circle--84
             text-primary"></div>
            <div class="progress-circle__content">
              <p class="progress-circle__score">84%</p>
            </div>
          </div>
        </div>
        <div class="progress-circle__item">
          <div class="progress-circle__graph">
            <div class="progress-circle__radial progress-circle--10
             text-primary-light"></div>
            <div class="progress-circle__content">
              <p class="progress-circle__score">10%</p>
            </div>
          </div>
        </div>
        <div class="progress-circle__item">
          <div class="progress-circle__graph">
            <div class="progress-circle__radial progress-circle--50
             text-secondary"></div>
            <div class="progress-circle__content">
              <p class="progress-circle__score">50%</p>
              <p class="progress-circle__value">Value</p>
              <p class="progress-circle__description">Description</p>
            </div>
          </div>
        </div>
      </div>

progress-circle.sass

@mixin progress-circle($name: ".progress-circle--",
 $color: currentColor, $bg: $secondary-lighter) {
  @for $i from 0 through 49 {
    #{$name}#{$i} {
      clip: rect(0, 1em, 1em, .5em);

      &::before {
        display: none;
      }

      &::after{
        transform: rotate(#{$i * 3.6}deg) translateZ(0);
      }
    }
  }

  @for $e from 50 through 99 {
    #{$name}#{$e} {
      clip: rect(auto, auto, auto, auto);

      &::before{
        transform: rotate(180deg);
        transform: rotate(180deg) translateZ(0);
      }

      &::after{
        transform: rotate(#{$e * 3.6}deg);
        transform: rotate(#{$e * 3.6}deg) translateZ(0);
      }
    }
  }

  #{$name}#{100} {
    clip: rect(auto, auto, auto, auto);

    &::before {
      clip: rect(auto, auto, auto, auto) !important;
    }

    &::after {
      display: none;
    }
  }
}

@include progress-circle;

.progress-circle {
  $font-size: $fs-h1;
  $value-font-size: $fs-h3;
  $size: 14rem; //add 2 borders
  $border: 0.7rem;

  &__container {
    padding: 0;
    margin-left: -$gutter/2;
    margin-right: -$gutter/2;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style-type: none;
  }

  &__item {
    font-size: $size;
    width: 1em;
    margin-left: $gutter/2;
    margin-right: $gutter/2;
    margin-bottom: 1rem;
  }

  &__graph {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    margin: 0 auto;
  }

  &__main-title {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  &__link {
    transform: scale(1);
    opacity: 0.8;
    display: block;
    transition: all 0.2s ease-out;

    &:hover,
    &:active,
    &:focus {
      opacity: 1;
      text-decoration: none;
      color: black;
    }

    .progress-circle__item.active & {
      opacity: 1;
      transform: scale(1.2);
    }
  }

  &__radial {
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;

    &::before,
    &::after {
      content: '';
      width: 100%;
      height: 100%;
      border: $border solid;
      clip: rect(0, .5em, 1em, 0);
      left: 0;
      position: absolute;
      border-radius: 50%;
      top: 0;
      box-sizing: border-box;
    }
  }

  &__content {
    border: $border solid $border-color;
    font-size: $fs-base;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  &__score {
    font-size: $font-size;
    margin: 0px;
    line-height: 1.2;
    font-weight: 200;
  }

  &__value {
    font-size: $value-font-size;
    margin: 0;
    line-height: 1em;
    font-weight: 200;
    &:first-child{
      margin-top: 0;
    }
  }

  &__description {
    text-align: center;
    font-size: $fs-base;
    margin: 0;
    line-height: 1em;
    font-weight: 400;
  }
}