/* Main element */
@keyframes main-spinner {
  0% {
    transform: translateZ(45px) rotate(0turn);
    background-color: inherit;
    box-shadow: none;
  }
  90% {
    transform: translateZ(45px) rotate(3turn);
    background-color: inherit;
    box-shadow: none;
  }
  100% {
    transform: translateZ(45px) rotate(3turn);
    background-color: #ec5433;
    box-shadow: 0 0 0 6px transparent, 0 0 0 10px #5e2e1d;
  }
}

@keyframes tick-fade-out {
  0%,
  90% {
    opacity: 1;
    background-color: #5e2e1d;
    width: 6px;
    height: 16px;
  }
  100% {
    opacity: 0;
    background-color: #5e2e1d;
    width: 6px;
    height: 16px;
  }
}

/* Orbiting animation */
@keyframes rotate-orbit {
  0% {
    transform: rotateZ(-45deg) translate(0%, -0%) rotateY(0deg)
      translateZ(120px) rotateY(0deg);
  }
  30% {
    transform: rotateZ(-45deg) translate(0%, -0%) rotateY(-1turn)
      translateZ(120px) rotateY(1turn);
  }
  60% {
    transform: rotateZ(-45deg) translate(0%, -0%) rotateY(-2turn)
      translateZ(120px) rotateY(2turn);
  }
  100% {
    transform: rotateZ(-45deg) translate(55%, -0%) rotateY(-3turn)
      translateZ(90px) rotateY(3turn);
  }
}

@keyframes fill-circle {
  0%,
  90% {
    fill: #555bc9;
    stroke: #ec5433;
    fill-opacity: 0;
  }
  100% {
    fill: #555bc9;
    stroke: #555bc9;
    fill-opacity: 1;
  }
}

.rotate-orbit {
  animation: rotate-orbit 4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: forwards;
}

.rotate-orbit circle {
  animation: fill-circle 4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: forwards;
}

.main-spinner {
  animation: main-spinner 4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: forwards;
}

.tick-element {
  animation: tick-fade-out 4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: forwards;
}
Orbiting Spinner

Installation

Installation
