Radial progress

by Marcos Moitas

HTML

<svg  xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200" data-value="40">
  <path class="bg" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0"  fill="none"/>
  <path class="meter" stroke="#09c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="400" stroke-dashoffset="350"/>
</svg>

SCSS

body {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
} 

svg path {
  will-change: auto;
  stroke-width: 20px;
  stroke-miterlimit: round;
  transition: stroke-dashoffset 850ms ease-in-out;
}