Responsive SVG circle

(bonus: loading state)

by jorgeluis

HTML

<!-- 
thanks to this pen 
https://codepen.io/xgad/pen/15372d14cd8ded6e9fbe4a4e7df76dbf -->

<div class="container">

  <div class="p-1">
    <svg class="doughnut" width="100%" height="100%" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="48" class="base-circle" stroke-width="4" />
      <circle class="value-circle" cx="50" cy="50" r="48" stroke="orange" stroke-width="4"
      stroke-dashoffset="10"
      stroke-dasharray="301.584"/>
    </svg>
  </div>

  <div class="p-1">
    <svg class="doughnut" width="100%" height="100%" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="48" class="base-circle" stroke-width="4" />
      <circle class="value-circle" cx="50" cy="50" r="48" stroke-width="4"
      stroke-dashoffset="100"
      stroke-dasharray="301.584"/>
    </svg>
  </div>

</div>

<div class="container">

  <div class="p-1 is-loading">
    <svg class="doughnut" width="100%" height="100%" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="48" class="base-circle" stroke-width="4" />
      <circle class="value-circle" cx="50" cy="50" r="48" stroke-width="4"
      stroke-dashoffset="150"
      stroke-dasharray="301.584"/>
    </svg>
  </div>

</div>

CSS

.doughnut {
	transform: rotate(-90deg);
  fill: none;
}

.base-circle, .value-circle {
  fill: none;
}
.base-circle {
  stroke: rgba(150, 150, 150, 0.2)
}
.value-circle {
  stroke: orange;
}

/* loading state animation */
.is-loading .value-circle {
  transform-origin: 50% 50%;
  animation: rotate 18s linear infinite;
  opacity: 0.3;
  transition: opacity 1s;
  stroke: var(--mute-color, #666)
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}


/* 
  the styles below are only for demo design 
*/
body {
  background: #191D22
}
.container {
  display: flex;
  justify-content: space-around;
}
svg {
  max-width: 150px;
}
.p-1 {
  padding: 1em
}