:root {
  --ui-kit-loader-color: #8f99f0;
  --ui-kit-loader-size: 60px;
  --ui-kit-loader-speed: 2s;
}

.ui-kit-loader-container {
  --ui-kit-loader-color-1: #a5adf3;
  --ui-kit-loader-color-2: #64657b;
  --ui-kit-loader-color-3: #c592b1;
  --ui-kit-loader-color-4: #e5aa9b;
  --ui-kit-loader-dot-size: calc(var(--ui-kit-loader-size) / 6);
  --ui-kit-loader-dot-start-position: calc(var(--ui-kit-loader-dot-size) / 1.5);
  --ui-kit-loader-dot-center-position: calc(calc(var(--ui-kit-loader-size) - var(--ui-kit-loader-dot-size)) / 2);
  --ui-kit-loader-dot-end-position: calc(var(--ui-kit-loader-size) - var(--ui-kit-loader-dot-start-position) - var(--ui-kit-loader-dot-size));

  width: var(--ui-kit-loader-size);
  height: var(--ui-kit-loader-size);
  display: inline-block;
  overflow: hidden;
  background: transparent;
}

.ui-kit-loader {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}

.ui-kit-loader div {
  position: absolute;
  width: var(--ui-kit-loader-dot-size);
  height: var(--ui-kit-loader-dot-size);
  border-radius: 50%;
  transform: translate(var(--ui-kit-loader-dot-center-position), var(--ui-kit-loader-dot-center-position)) scale(1);
  background: var(--ui-kit-loader-color);
  animation: ui-kit-loader var(--ui-kit-loader-speed) infinite ease;
  box-sizing: content-box;
}

.ui-kit-loader div:nth-child(1) {
  transform: translate(var(--ui-kit-loader-dot-end-position), var(--ui-kit-loader-dot-center-position)) scale(1);
  animation: ui-kit-loader-scale calc(var(--ui-kit-loader-speed) * 0.25) infinite ease;
}

.ui-kit-loader div:nth-child(2) {
  animation-delay: calc(var(--ui-kit-loader-speed) * -0.25);
}

.ui-kit-loader div:nth-child(3) {
  animation-delay: calc(var(--ui-kit-loader-speed) * -0.5);
}

.ui-kit-loader div:nth-child(4) {
  animation-delay: calc(var(--ui-kit-loader-speed) * -0.75);
}

.ui-kit-loader div:nth-child(5) {
  animation-delay: calc(var(--ui-kit-loader-speed) * -1);
}

.ui-kit-loader.colorful div {
  background: var(--ui-kit-loader-color-2);
}

.ui-kit-loader.colorful div:nth-child(1) {
  background: var(--ui-kit-loader-color-1);
  animation: ui-kit-loader-scale calc(var(--ui-kit-loader-speed) * 0.25) infinite ease, ui-kit-loader-color var(--ui-kit-loader-speed) infinite step-start;
}

.ui-kit-loader.colorful div:nth-child(2) {
  background: var(--ui-kit-loader-color-2);
}

.ui-kit-loader.colorful div:nth-child(3) {
  background: var(--ui-kit-loader-color-1);
}

.ui-kit-loader.colorful div:nth-child(4) {
  background: var(--ui-kit-loader-color-4);
}

.ui-kit-loader.colorful div:nth-child(5) {
  background: var(--ui-kit-loader-color-3);
}

@keyframes ui-kit-loader {
  0% {
    transform: translate(var(--ui-kit-loader-dot-start-position), var(--ui-kit-loader-dot-center-position)) scale(0);
  }

  25% {
    transform: translate(var(--ui-kit-loader-dot-start-position), var(--ui-kit-loader-dot-center-position)) scale(0);
  }

  50% {
    transform: translate(var(--ui-kit-loader-dot-start-position), var(--ui-kit-loader-dot-center-position)) scale(1);
  }

  75% {
    transform: translate(var(--ui-kit-loader-dot-center-position), var(--ui-kit-loader-dot-center-position)) scale(1);
  }

  100% {
    transform: translate(var(--ui-kit-loader-dot-end-position), var(--ui-kit-loader-dot-center-position)) scale(1);
  }
}

@keyframes ui-kit-loader-scale {
  0% {
    transform: translate(var(--ui-kit-loader-dot-end-position), var(--ui-kit-loader-dot-center-position)) scale(1);
  }

  100% {
    transform: translate(var(--ui-kit-loader-dot-end-position), var(--ui-kit-loader-dot-center-position)) scale(0);
  }
}

@keyframes ui-kit-loader-color {
  0% {
    background: var(--ui-kit-loader-color-2)
  }

  25% {
    background: var(--ui-kit-loader-color-3)
  }

  50% {
    background: var(--ui-kit-loader-color-4)
  }

  75% {
    background: var(--ui-kit-loader-color-1)
  }

  100% {
    background: var(--ui-kit-loader-color-2)
  }
}