Circle progress component with scss and html

circle-progress.md

Circle progress component with scss and html. Supported by all browsers and platforms.

<div class="app-progress">
  <svg>
    <circle  cx="25" r="21" cy="25" class="progress-ring done-{{VALUE}}"/>
  </svg>
</div>

@mixin circle-progress($radius, $stroke-w) {
  position: relative;
  border-radius: 50%;
  width: #{$radius}px;
  height: #{$radius}px;
  min-width: #{$radius}px;
  min-height: #{$radius}px;
  background: rgba(0, 0, 0, 0.7);

  ion-icon {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 22px;
  }

  svg {
    width: #{$radius}px;
    height: #{$radius}px;

    .progress-ring {
      $r: ($radius/2) - ($stroke-w * 2);
      $pi2: 2 * 3.1415926535;
      $circumference: $r * $pi2;
      stroke-dasharray: $circumference $circumference;
      transition: 0.35s stroke-dashoffset;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      stroke: #ffffff;
      fill: transparent;
      stroke-linecap: round;
      stroke-width: $stroke-w;
      animation: spin 1s linear infinite;

      // Next properties are not supported in latest safari
      // Manually dublicated in element attributes
      cx: $radius/2;
      cy: $radius/2;
      r: $r;

      @for $i from 0 through 100 {
        &.done-#{$i} {
          stroke-dashoffset: calc(#{($r * $pi2)}px - (#{$i}px / 100) * #{$circumference});
        }
      }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  }
}

.app-progress {
 @include circle-progress(50, 2);
}