Loading SVG circle (using rotate)

(bonus: loading state)

by jorgeluis

HTML

<div class="container">

  <div class="is-spinning">
    <svg class="doughnut" width="100px" height="100px" viewBox="0 0 100 100">
      <circle class="base-circle" cx="50" cy="50" r="48" stroke-width="4" />
      <circle class="dashed-circle" cx="50" cy="50" r="48" stroke-width="4"/>
    </svg>
  </div>

</div>


<p>
Rotating one circle on top of another seems like it should be easy using css transform: rotate() &mdash; and it does behave correctly on Chrome, Firefox, and Safari... until you zoom the browser, in which case Safari (currently version 13.1, April 2020) seems to lose the transform-origin point.
</p>

<p>
To remove the problem with how transform-origin is calculated for SVG (parent vs self), I set both the container size and the svg to a 100px square.
</p>

<p>
Zoom the browser in or out to see the effect on Safari.
</p>

CSS

.doughnut {
  fill: none;
}

.base-circle, .dashed-circle {
  transform-origin: 50% 50%;
  fill: none;
}
.base-circle {
  stroke: rgba(150, 150, 150, 0.2)
}
.dashed-circle {
  stroke: orange;
}

/* spinning animation using rotate */
.is-spinning .dashed-circle {
  animation: rotate 6s alternate infinite;
  stroke-dasharray: 10 20;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}


/* 
  the styles below are only for demo design 
*/
body {
  background: #191D22;
  color: #ddd;
  line-height: 1.7;
  font-size: 22px;
}
.container {
  border: solid 1px olive;
  width: 100px;
  height: 100px;
}