A Pen by webinsation.

index.html

<svg class="spinner hidden" width="65px" height="65px" 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="30"></circle>
</svg>

<div class="break">
  <svg class="spinner" xmlns="http://www.w3.org/2000/svg" version="1.1" width="65px" height="100%" viewBox="-10 -10 220 220">
    <defs>
      <linearGradient id="transparent" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#9a9a9a" stop-opacity="0" />   
          <stop offset="100%" stop-color="#9a9a9a" stop-opacity="0" />   
      </linearGradient>
      <linearGradient id="start" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="#9a9a9a" stop-opacity="0" />   
          <stop offset="90%" stop-color="#9a9a9a"/>   
      </linearGradient>
      <linearGradient id="end" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stop-color="#9a9a9a" />   
          <stop offset="100" stop-color="#9a9a9a"/>   
      </linearGradient>
    </defs>

    <g fill="none" stroke-width="20" stroke-linecap="round" transform="translate(100,100)">
      <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#transparent)"/>
      <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#start)"/>
      <path d="M -86.6,50 A 100,100 0 1,1 86.6,50" stroke="url(#end)"/>
    </g>
  </svg>
</div>
<button class="btn">
    <svg class="icon spinner" xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" height="100%" viewBox="-10 -10 220 220">
      <defs>
        <linearGradient id="transparent" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#fff" stop-opacity="0" />   
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />   
        </linearGradient>
        <linearGradient id="start" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#fff" stop-opacity="0" />   
            <stop offset="90%" stop-color="#fff"/>   
        </linearGradient>
        <linearGradient id="end" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#fff" />   
            <stop offset="100" stop-color="#fff"/>   
        </linearGradient>
      </defs>

      <g fill="none" stroke-width="20" stroke-linecap="round" transform="translate(100,100)">
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#transparent)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#start)"/>
        <path d="M -86.6,50 A 100,100 0 1,1 86.6,50" stroke="url(#end)"/>
      </g>
    </svg>
  Signing in...
</button>

style.scss

// This is just to center the spinner
.hidden {
  display: none;
}
.break {
  margin-bottom: 50px;
}

.btn {
  display: inline-block;
  background: #7fc1f2;
  width: 400px;
  text-align: center;
  border-radius: 5px;
  height: 42px;
  line-height: 40px;
  color: #fff;
  font-family: arial;
  font-size: 17px;
  vertical-align: middle;
  border: none;
}
.icon {
  display: inline-block;
  position: relative;
  left: -5px;
  top: 4px;
  height: 20px;
}

html, body { height: 100%; }

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

// Here is where the magic happens

$offset: 187;
$duration: 700ms;

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

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

.path {
  stroke-dasharray: 150;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: #9a9a9a;
  animation: $duration linear infinite;
}

@keyframes dash {
 0% { stroke-dashoffset: 0; }
 50% {
   /* stroke-dashoffset: $offset/5; */
   /* transform:rotate(135deg); */
 }
 100% {
   stroke-dashoffset: 0;
   /* transform:rotate(450deg); */
 }
}

SVG-gradient-ajax-loader.markdown

SVG gradient ajax loader

This loader is using 3 different arcs to make the gradient stroke.

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

A Pen by webinsation on CodePen.

License.