SCSS

by Wietse De Vries

HTML

<svg class="svg" viewBox="0 0 50 50">
  <style>
    #a {
      stroke: #FFF;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite, rotate 2s linear infinite;
      transform-origin: 25px 25px;
    }
      @keyframes dash {
        0% {
          stroke-dasharray: 1, 150;
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -35;
        }
        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -124;
        }
      }
      @keyframes rotate {
        100% {
          transform: rotate(360deg);
        }
      }
  </style>
  <circle id="a" class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg> 
<!-- <div class="spinner">
</div> -->

SCSS

body {
  background-color: #000;
}

.svg {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cstyle%3E %23a %7B stroke: %23FFF; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1, 150; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 90, 150; stroke-dashoffset: -35; %7D 100%25 %7B stroke-dasharray: 90, 150; stroke-dashoffset: -124; %7D %7D %3C/style%3E%3Ccircle id='a' class='path' cx='25' cy='25' r='20'  fill='none' stroke-width='7'%3E%3C/circle%3E%3C/svg%3E");
}

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