=progressCircle($themeColor: blue, $backColor: white, $step : 1, $attribute : 'aria-valuenow')
  $loops: round(100 / $step)
  $increment: 360 / $loops
  $half: round($loops / 2)

  &:after
    content: ''
    position: relative
    width: calc(100% + 4px)
    height: calc(100% + 4px)
    left: -2px
    top: -2px

  @for $i from 0 through $loops
    &[#{$attribute}= "#{$i * $step}"]:after
      @if $i < $half
        $nextDeg: 90deg + $increment * $i
        background: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextDeg, $themeColor 50%, $backColor 50%, $backColor)

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

=progressPulse($themeColor: blue)

  &:after
    content: ''
    background-color: $themeColor
    width: 100%
    height: 100%
    transition: transform 0.3s
    border-radius: 50%
    transform: scale3d(0,0,1)

  @for $i from 0 through 100
    &[#{aria-valuenow}= "#{$i}"]:after
      transform: scale3d(#{0 + ($i/100) }, #{0 + ($i/100) }, 1)