A Pen by Casper Pascal.

index.html

<svg class="spinner" width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
   <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="20"></circle>
</svg>

<svg class="spinner" width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
   <circle class="path colors" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="20"></circle>
</svg>

Material-Design-Spinner.markdown

Material Design Spinner

CSS and SVG recreation of the new Google material design loading spinner.

Forked from Fran Pérez's Pen Material Design Spinner.

A Pen by Casper Pascal on CodePen.

License.

style.scss

// This is just to center the spinner

html, body { height: 100%; }

body {
   display: flex;
   align-items: center;
   justify-content: center;
}

$offset: 125;  // Here is where the magic happens
$duration: 3s;
$duration2: $duration*2;

.spinner {
  animation: rotator $duration linear infinite;
}

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

.path {
  stroke-dasharray: $offset;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash $duration2 ease-in-out infinite;
  stroke: #4285F4;
}

.path.colors {
  animation:
    dash $duration2 ease-in-out infinite, 
    colors $duration2 ease-in infinite;
}

@keyframes colors {
	0% { stroke: #4285F4; }
  20% { stroke: #4285F4; }
	25% { stroke: #DE3E35; }
  45% { stroke: #DE3E35; }
	50% { stroke: #F7C223; }
  70% { stroke: #F7C223; }
	75% { stroke: #1B9A59; }
  95% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@keyframes dash {
 0% { stroke-dashoffset: $offset; }
 12.5% {
   stroke-dashoffset: $offset/4;
   transform:rotate(0deg);
 }
 25% {
   stroke-dashoffset: $offset;
   transform:rotate(270deg);
 }
  
 37.5% {
   stroke-dashoffset: $offset/4;
   transform:rotate(270deg);
 }
 50% {
   stroke-dashoffset: $offset;
   transform:rotate(540deg);
 }
  
 62.5% {
   stroke-dashoffset: $offset/4;
   transform:rotate(540deg);
 }
 75% {
   stroke-dashoffset: $offset;
   transform:rotate(810deg);
 }
  
 87.5% {
   stroke-dashoffset: $offset/4;
   transform:rotate(810deg);
 }
 100% {
   stroke-dashoffset: $offset;
   transform:rotate(1080deg);
 }
}