SVG circle spinner (css keyframes only)

index.html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle 
    class="ring-track" 
    fill="transparent"
    stroke-width="6px"
    stroke="#9c9c9c30"
    cx="50" cy="50" 
    r="44" 
  />
  <circle 
    class="loader-ring" 
    fill="transparent"
    stroke-width="6px"
    stroke="#ec5c0e"
    stroke-dashoffset="276.460"
    stroke-dasharray="276.460 276.460"
    cx="50"
    cy="50"
    r="44" 
  />
    <circle 
    class="loader-ring-overlay" 
    fill="transparent"
    stroke-width="6px"
    stroke="#ec5c0e"
    stroke-dashoffset="276.460"
    stroke-dasharray="276.460 276.460"
    cx="50"
    cy="50"
    r="44" 
  />
</svg>
<button role="button" class="hidden">Reset</button>

script.js

/* JS to 'complete loading' on click &
add reset button  */

const loader = document.querySelector("svg"),
      button = document.querySelector("button");
// on clicking svg spinner, 'finish loading'
loader.addEventListener("click", e => {
  document.body.classList.add("complete");
  setTimeout(() => {
    loader.classList.add("hidden");
    button.classList.remove('hidden');
  }, 900);
});
// reset svg spinner & hide button
button.addEventListener("click", e => {
  button.classList.add("hidden");
  document.body.classList.remove("complete");
  loader.classList.remove('hidden');
})

style.css

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
* {
  -webkit-tap-highlight-color: transparent;
}
::-moz-focus-inner {
      border: 0;
      outline: 0;
      padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0d2133;
}
svg {
  width: 70px;
  overflow: visible;
  cursor: pointer;
}
svg .loader-ring {
  transform-origin: 50px 50px;
  animation: 
    starting-fill 0.5s forwards,
    vary-loader-width 3s 0.5s linear infinite alternate,
    spin 1.6s 0.2s linear infinite;
}
svg .loader-ring-overlay {
  visibility: hidden;
  transform-origin: 50px 50px;
  animation: spin 1.6s 0.2s linear infinite;
}
.complete .loader-ring-overlay {
  visibility: visible;
  animation: 
    complete-fill 0.5s linear forwards, 
    spin 1.6s 0.2s linear infinite;
}
.complete .loader-ring {
  animation: 
    starting-fill 0.5s forwards,
    vary-loader-width 3s 0.5s linear infinite alternate,
    spin 1.6s 0.2s linear infinite, fade 0.1 0.5s linear forwards;
}
.complete svg {
  animation: fade 0.2s 0.7s linear forwards;
  transition: all 0s 0.9s;
  cursor: initial;
  pointer-events: none;
}
button {
  padding: 10px 20px;
  border: none;
  margin: 0;
  border-radius: 30px;
  background-color: #10828800;
  font-size: 16px;
  color: #139ba2;
  outline: 1px solid #139ba2;
  cursor: pointer;
  animation: fade 0.4s 0.8s reverse both;
}
.hidden {
  display: none !important;
}
@keyframes starting-fill {
  to {
    stroke-dashoffset: 270;
  }
}
@keyframes vary-loader-width {
  0% {
    stroke-dashoffset: 270;
  }
  50% {
    stroke-dashoffset: 170;
  }
  100% {
    stroke-dashoffset: 275;
  }
}
@keyframes complete-fill {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

svg-circle-spinner-css-keyframes-only.markdown

SVG circle spinner (css keyframes only)

Loading spinner, created by animating stroke-dashoffset on svg

Click the spinner, to 'finish loading'

For an explanation on how I created this click here: https://www.nickhart.co.uk/2020/03/05/svg-loading-spinner/

A Pen by IpsumLorem16 on CodePen.

License.