#initial-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fafafa;
  position: sticky;
}
#initial-loader svg {
  display: block;
  max-width: 100%;
  height: auto;
  animation: spinnerRotate 1s infinite ease-in-out;
}
#initial-loader svg circle {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: 0;
  stroke: #d62d20;
  animation: spinnerDash 1.5s ease-in-out infinite, spinnerColor 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes spinnerRotate {
  to {
    transform: rotate(360deg)
  }
}

@keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px
  }

  to {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px
  }
}

@keyframes spinnerColor {
  to,
  0% {
    stroke: #d62d20
  }

  40% {
    stroke: #0057e7
  }

  66% {
    stroke: #008744
  }

  80%,
  90% {
    stroke: #ffa700
  }
}