.loader__wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(23, 22, 26, 1.0);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.loader__svg {
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
}

.loader__stroke-still {
  stroke: #232323;
}

.loader__stroke-animation {
  animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
  animation-iteration-count: infinite;
}

@keyframes stroke-spacing {
  0% {
    stroke-dasharray: 0 200;
  }
  45% {
    stroke-dashoffset: 0;
    stroke-dasharray: 200 200;
  }
  90% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200 200;
  }
  100% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200 200;
  }
}

@keyframes stroke-color {
  0%  { stroke: #3498DB; }
  24% { stroke: #643232; }
  25% { stroke: #327864; }
  49% { stroke: #327864; }
  50% { stroke: #32326e; }
  74% { stroke: #32326e; }
  75% { stroke: #78325a; }
  99% { stroke: #78325a; }
}