Radial Circle Loading Spinner

by kthornbloom

HTML

<svg height="100" width="100" id="loading-spinner">
  <circle cx="50" cy="50" r="42" stroke-width="8" fill="none" />
</svg>

CSS

#loading-spinner {
  stroke: blue;
  stroke-dasharray: 310px;
  stroke-dashoffset: 310px;
  transition: 1s;
  box-shadow: 0 0 5px #ccc;
}

JavaScript

document.getElementById('loading-spinner').style.strokeDashoffset = "50"