Rainbow Spinner

by Andrey Izman

HTML

<div class="loading">
  <spinner size="96" style="height: 96px; width: 96px;">

    <div class="layer layer-1">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>

    <div class="layer layer-2">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>

    <div class="layer layer-3">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>

    <div class="layer layer-4">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </devsite-spinner>
</div>

CSS

.loading {
  padding: 100px 0;
  justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

spinner {
  animation: 1.56824s linear 0s infinite normal none running container-rotate;
  direction: ltr;
  display: flex;
  height: 28px;
  position: relative;
  width: 28px;
}

@keyframes container-rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes fill-unfill-rotate{
  12.5% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(405deg);
  }
  50% {
    transform: rotate(540deg);
  }
  62.5% {
    transform: rotate(675deg);
  }
  75% {
    transform: rotate(810deg);
  }
  87.5% {
    transform: rotate(945deg);
  }
  100% {
    transform: rotate(3turn);
  }
}

@keyframes layer-1-fade-in-out {
  0%, 25%, 90%, 100% {
    opacity: 0.99;
  }
  26%, 89% {
    opacity: 0;
  }
}
@keyframes layer-2-fade-in-out {
  0%, 15%, 51% {
    opacity: 0;
  }
  25%, 50% {
    opacity: 0.99;
  }
}

@keyframes layer-3-fade-in-out {
  0%, 40%, 76% {
    opacity: 0;
  }
  50%, 75% {
    opacity: 0.99;
  }
}

@keyframes layer-4-fade-in-out {
  0%, 65%, 100% {
    opacity: 0;
  }
  75%, 90% {
    opacity: 0.99;
  }
}

@keyframes left-spin {
  0%, 100% {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}
@keyframes right-spin {
  0%, 100% {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.gap-patch,
.layer {
  position: absolute;
}
.layer {
  height: 100%;
  opacity: 0;
  width: 100%;
}

.layer-1 {
  animation: 5332ms cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal both running fill-unfill-rotate, 5332ms cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal both running layer-1-fade-in-out;
  border-color: rgb(66, 165, 245);
}
.layer-1 {
  border-color: rgb(8, 89, 154);
}

.layer-2 {
  animation: 5332ms cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal both running fill-unfill-rotate, 5332ms cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal...