Material Style Spinner

index.html

<div class="loader">
  <svg width="2.4em" height="2.4em">
    <!-- unit circle -->
    <circle cx="1.2em" cy="1.2em" r="1em"/>
  </svg>
</div>

material-style-spinner.markdown

Material Style Spinner

This is based on the Material style circle spinner.

http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators

A Pen by Benjam on CodePen.

License.

style.scss

$pi: 3.14159265359em;
$tau: 6.28318530718em; // 2 * pi
$quarter: $tau / 4;
$three-quarter: $quarter * 3;
$small: 0.22em;

$dash-time: 1.4s;
$rotate-time: 2.05s;

body {
  padding: 2rem;
  text-align: center;
}

.loader {
  display: inline-block;
  font-size: 1.5rem; /* Change this to resize the loader */
  animation: $rotate-time rotate infinite linear;
  width: 2.4em;
  height: 2.4em;
}

.loader circle {
  fill: transparent;
  stroke: #2A8FBD;
  /*stroke-linecap: square;*/
  stroke-width: 0.2em;
  stroke-dasharray: ($three-quarter + ($small / 2)) ($quarter - ($small / 2));
  animation: $dash-time strokeDashArray infinite linear, ($dash-time * 4) strokeOffset infinite linear;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes strokeDashArray {
    0% { stroke-dasharray: ($three-quarter + ($small / 2)) ($quarter - ($small / 2)); }
   10% { stroke-dasharray: ($three-quarter + ($small / 2)) ($quarter - ($small / 2)); }
   50% { stroke-dasharray: $small ($tau - ($small / 2)); }
   60% { stroke-dasharray: $small ($tau - ($small / 2)); }
  100% { stroke-dasharray: ($three-quarter + ($small / 2)) ($quarter - ($small / 2)); }
}

$offset: ($three-quarter);
@keyframes strokeOffset {
   0% { stroke-dashoffset: -($offset * 0); } /* 0 */
  
   2.5% { stroke-dashoffset: -($offset * 0); } /* 1st 10% */
  12.5% { stroke-dashoffset: -($offset * 1); } /* 1st 50% */
  
  27.5% { stroke-dashoffset: -($offset * 1); } /* 2nd 10% */
  37.5% { stroke-dashoffset: -($offset * 2); } /* 2nd 50% */
  
  52.5% { stroke-dashoffset: -($offset * 2); } /* 3rd 10% */
  62.5% { stroke-dashoffset: -($offset * 3); } /* 3rd 50% */
  
  77.5% { stroke-dashoffset: -($offset * 3); } /* 4th 10% */
  87.5% { stroke-dashoffset: -($offset * 4); } /* 4th 50% */
  
  99.99% { stroke-dashoffset: -($offset * 4); } /* very close to last, for flip */
}