Material Style Alternating 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-alternating-spinner.markdown

Material Style Alternating 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
$half: $tau / 2;
$small: 0em;

$dash-time: 2s;
$rotate-time: 5s;

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: round;  
  stroke-width: 0.2em;
  stroke-dasharray: $tau $small;
  animation: $dash-time strokeDashArray infinite linear
    , ($dash-time * 2) strokeOffset infinite linear
    , ($dash-time * 4) colorBounce infinite linear;
}

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

@keyframes strokeDashArray {
    0% { stroke-dasharray: $tau $small; }
   10% { stroke-dasharray: $tau $small; }
   50% { stroke-dasharray: $small $tau; }
   60% { stroke-dasharray: $small $tau; }
  100% { stroke-dasharray: $tau $small; }
}

$offset: ($half);
@keyframes strokeOffset {
    0% { stroke-dashoffset: -($offset * 0); } /* 0 */
  
    5% { stroke-dashoffset: -($offset * 0); } /* 1st 10% */
   25% { stroke-dashoffset: -($offset * 1); } /* 1st 50% */
   30% { stroke-dashoffset: -($offset * 1); } /* 1nd 60% */
   50% { stroke-dashoffset: -($offset * 0); } /* 1nd 100% */
  
   55% { stroke-dashoffset: -($offset * 1); } /* 2nd 10% */
   75% { stroke-dashoffset: -($offset * 2); } /* 2nd 50% */
   80% { stroke-dashoffset: -($offset * 2); } /* 2nd 60% */
  100% { stroke-dashoffset: -($offset * 1); } /* very close to 2nd 100%, for flip */
}



@keyframes colorBounce {
  1% {
    stroke: #2A8FBD;
  }
  
  24% {
    stroke: #2A8FBD;
  }
  
  26% {
    stroke: #8EBD2A;
  }
  
  49% {
    stroke: #8EBD2A;
  }
  
  51% {
    stroke: #BF2A2A;
  }
  
  74% {
    stroke: #BF2A2A;
  }
  
  76%{
    stroke: #ECB43E;
  }
  
  99% {
    stroke: #ECB43E;
  }
}