css svg spinner

css-svg-spinner.markdown

css svg spinner

A modern svg spinner animarion in css

A Pen by groteck on CodePen.

License.

index.html

<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<svg class="spinner" viewBox="0 0 200 200">
  <circle class="path" cx="100" cy="100" r="80" fill="none" stroke-width="20"></circle>
</svg>

style.scss

html, body {
  height: 100%;
  background-image: linear-gradient(-105deg, #009acc, #363795);
}

.spinner {
  transform: rotate(90deg);
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 200px;
  height: 200px;
  
  & .path {
    stroke: hsl(210, 70, 75);
    stroke-linecap: round;
    animation: dash 1s linear infinite;
  }
  
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 600;
    stroke-dashoffset: 0;
  }
  15% {
    stroke-dasharray: 70, 600;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 70, 600;
    stroke-dashoffset: -140;
  }
  85% {
    stroke-dasharray: 70, 600;
    stroke-dashoffset: -396;
  }
  100% {
    stroke-dasharray: 1, 600;
    stroke-dashoffset: -496;
  }
}