@use 'sprucecss/scss/spruce' as *;

.preloader--circle {
  --color: currentColor;
  --border-width: 0.25em;
  --size: 1.5rem;
  --animation-duration: 1s;

  block-size: var(--size);
  inline-size: var(--size);

  &::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;

  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);

    &:nth-child(1) { animation-delay: -0.3s; }
    &:nth-child(2) { animation-delay: -0.15s; }
  }
}

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

  40% {
    transform: scaleY(1.25);
  }
}

<span class="preloader--circle"></span>
<span class="preloader--bars">
    <span></span>
    <span></span>
    <span></span>
</span>