<svg class="spin" width="150" height="150">
  <circle cx="75" cy="75" r="50" 
          fill="transparent" 
          stroke="black" 
          stroke-width="25"
          stroke-dasharray="157 50" /> 
</svg>

@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes angle {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.spin {
  animation: angle 1s linear infinite;
  transform: rotate(var(--angle));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.