SVG Loading Spinner

by Spencer Smith

HTML

<svg viewBox="0 0, 100 100" width="40" class="spinner">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(10)">
      <stop offset="10%"   stop-color="#888"/>
      <stop offset="100%" stop-color="whitesmoke"/>
    </linearGradient>
  </defs>
  <path d="M 50 10 A 40 40 0 1 0 90 50" stroke="url(#linear)" stroke-width="20" fill="none" stroke-linecap="round"/>
</svg>

SCSS

.spinner {
  animation: spin .5s infinite linear;
  path {
    stroke: linear-gradient(black, red)
  }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}