circle progress

by Andrey

HTML

<!-- stroke-width + r = 100 -->

<div class="demo" id='circle'>
  <svg class="progress" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="30" fill="none" stroke="#ddd" stroke-width="10" />
        <circle class="progress__value" cx="50" cy="50" r="30" fill="none" stroke="#f77a52" stroke-width="10" stroke-linecap="round" />
    </svg>
</div>

SCSS

.demo {
width: 250px;
height: 250px;
}

.progress {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
}

$r:49;
$proc:0;
$circle: 2 * 3.14 * $r;
.progress__value {
  stroke-dasharray: $circle;
  stroke-dashoffset: $circle;
  //$circle * (1 - $proc/100)
}

JavaScript

var proc = 25 //%
$('#circle .progress__value').animate({
'stroke-dashoffset': 2*3.14*49*(1- proc/100)
}, 1000)