.preloader--circle {
  --color: currentColor;
  --border-width: 0.25em;
  --size: 1.5rem;
  --animation-duration: 1s;
  block-size: var(--size);
  inline-size: var(--size);
}
.preloader--circle::after {
  animation: rotation var(--animation-duration) linear infinite;
  block-size: var(--size);
  border: var(--border-width) solid var(--color);
  border-color: var(--color) transparent var(--color) transparent;
  border-radius: 50%;
  content: "";
  display: flex;
  inline-size: var(--size);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.preloader--bars {
  --color: currentColor;
  --size: 1.5rem;
  --animation-duration: 1s;
  align-items: center;
  block-size: var(--size);
  display: flex;
  inline-size: var(--size);
  justify-content: space-between;
  position: relative;
}
.preloader--bars span {
  animation: resize var(--animation-duration) infinite ease-in-out;
  background: var(--color);
  block-size: var(--size);
  border-radius: 1px;
  inline-size: calc(var(--size) / 6);
}
.preloader--bars span:nth-child(1) {
  animation-delay: -0.3s;
}
.preloader--bars span:nth-child(2) {
  animation-delay: -0.15s;
}

@keyframes resize {
  0%, 80%, 100% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(1.25);
  }
}