<svg height="100" width="100" class="progress" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="90"/>
  <circle class="progress__fill" cx="100" cy="100" r="90"/>
</svg>
.progress {
  width: 100px;
  height: 100px;
}

.progress circle {
  stroke: #212121;
  stroke-width: 15;
  stroke-linecap: round;
  
  fill: #e0e0e0;
}

.progress .progress__fill {
  /* = 2 * PI * R = 2 * PI * 90 */
  
  stroke-dasharray: 565.486678;
  stroke-dashoffset: 565.486678;
  
  stroke: #f5414f;
  fill: transparent;
  
  transition: stroke-dashoffset 1.2s;
}

.progress:hover .progress__fill {
  stroke-dashoffset: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.