Simple SVG Stroke Spinner

index.html

<svg class="svg" width=200 height=200>
  <circle cx=100 cy=100 r=50 />
</svg>

Simple SVG Stroke Spinner.markdown

Simple SVG Stroke Spinner

stroke-dasharray, stroke-offset, and all that jazz.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

$svg-radius: 50;
$stroke-width: 4;
$radius: $svg-radius - $stroke-width / 2;
$diameter: $radius * 2;
$pi: 3.14159265359;
$circumference: $pi * $diameter;
$revolution: 2000ms;
$color-steps: 4;

body { background: #000; }

.svg {
  margin: 24px auto;
  display: block;
  animation: svg-rotate $revolution * $color-steps linear infinite;
}

circle {
  fill: transparent;
  stroke: hotpink; // overridden in animation
  stroke-width: $stroke-width;
  stroke-linecap: round;
  stroke-dasharray: 0, $circumference;
  animation: 
    stroke-dash  $revolution linear infinite,
    stroke-width $revolution linear infinite,
    stroke-color $revolution * $color-steps steps($color-steps) infinite;
}

// slowly rotating the whole svg
@keyframes svg-rotate {
  to { transform: rotate(360deg); }
}

// animating the stroke width
@keyframes stroke-width {
  // fade-ish feels
  0%, 100% { stroke-width: 0; }
  // throttle til circle is almost complete
  45%, 55% { stroke-width: $stroke-width / 2; }
  // pump it up
  50%      { stroke-width: $stroke-width; }
}  

// offsetting and lengthening the stroke dash
@keyframes stroke-dash {
  0%   { // draw circle
    stroke-dasharray: 0, $circumference; 
    stroke-dashoffset: 0; 
  }
  50% { // complete circle
    stroke-dasharray: $circumference, 0; 
    stroke-dashoffset: 0;
  }
  100% { // undraw circle
    stroke-dasharray: $circumference, $circumference; 
    stroke-dashoffset: -$circumference; 
  }
}

// stepped color animation
@keyframes stroke-color {
  from { stroke: hotpink; }
  //to   { stroke: white; } // unnecessary if white
}