.loaderContainer {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  background: rgba(255, 255, 255, 0.4);

  z-index: 1000;
}

.loaderWrapper {
  position: fixed;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  z-index: 1001;
}

.loader {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, #0000 40%, #000 41%);
  background: linear-gradient(0deg, var(--color-1) 50%, var(--color-3) 0) center/4px 100%,
    linear-gradient(90deg, var(--color-1) 50%, var(--color-2) 0) center/100% 4px;
  background-repeat: no-repeat;
  animation: s3 1s infinite steps(12);
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}

.loader::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

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