.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141218;
}

.iconLoaderProgress {
  display: flex;
  align-items: center;
  justify-content: center;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: rotateLoader;
}

.iconLoaderProgress svg {
  stroke-width: 16px;
  fill: none;
  transform-origin: center;
  z-index: 999;
}

.iconLoaderProgressFirst circle,
.iconLoaderProgressSecond circle,
.iconLoaderProgressFirst,
.iconLoaderProgressSecond {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.iconLoaderProgressFirst circle,
.iconLoaderProgressSecond circle {
  animation-duration: 3s;
  border-radius: 15px;
}

.iconLoaderProgressFirst,
.iconLoaderProgressSecond {
  position: absolute;
  animation-duration: 6s;
}

.iconLoaderProgressFirst circle {
  animation-name: circleFirst;
  stroke-dasharray: 628, 628;
  stroke-dashoffset: 0;
  stroke: #7c57f4;
  stroke-linecap: round;
}

.iconLoaderProgressSecond {
  transform: rotate(-14deg);
}

.iconLoaderProgressSecond circle {
  animation-name: circleSecond;
  stroke-dasharray: 628, 628;
  stroke-dashoffset: 0;
  stroke: #bfb2f7;
  stroke-linecap: round;
}

@keyframes circleFirst {
  from,
  to {
    stroke-dashoffset: 50;
  }

  50% {
    stroke-dashoffset: 625;
  }
}

@keyframes circleSecond {
  from,
  to {
    stroke-dashoffset: -625;
  }

  50% {
    stroke-dashoffset: -50;
  }
}

@keyframes rotateLoader {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}