Modern Google Loader in Pure CSS

index.html

<div class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>

Modern Google Loader in Pure CSS.markdown

Modern Google Loader in Pure CSS ('-' * 32) Modern Google spinning loader animating through four colors.

A Pen by jczimm on CodePen.

License.

style.css

$green: #008744;
$blue: #0057e7;
$red: #d62d20;
$yellow: #ffa700;
$white: #eee;

$width: 100px;
$zoom: 1.7;

body {
  background-color: $white;
}

.loader {
  position: relative;
  margin: 0px auto;
  width: $width;
  height: $width;
  zoom: $zoom;
}

.circular {
 animation: rotate 2s linear infinite;
 height: $width;
 position: relative;
 width: $width;
}


.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation: 
   dash 1.5s ease-in-out infinite,
   color 6s ease-in-out infinite
  ;
  stroke-linecap: round;
}

@keyframes rotate{
 100%{
  transform: rotate(360deg);
 }
}
@keyframes dash{
 0%{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
 }
 50%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35;
 }
 100%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124;
 }
}
@keyframes color{
  100%, 0%{
    stroke: $red;
  }
  40%{
    stroke: $blue;
  }
  66%{
    stroke: $green;
  }
  80%, 90%{
    stroke: $yellow;
  }
}