Прелоадер

<span class="loader"></span>

<style>
  .loader {
    --color: 255 255 255; /* цвет (rgb) */
    --size: 5rem; /* размер */
    width: var(--size);
    position: relative;
    display: inline-block;
    aspect-ratio: 1;
  }
  .loader::before,
  .loader::after {
    --fill-box-shadow: 0 0 0 calc(var(--size) * 0.12) rgb(var(--color));
    --box-shadow: 0 0 0 0 rgb(var(--color));
    content: "";
    position: absolute;
    aspect-ratio: inherit;
    border-radius: 50%;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    filter: drop-shadow(0 0 calc(var(--size) * 0.08) rgba(var(--color) / .75));
  }
  .loader::before {
    width: var(--size);
    box-shadow: inset var(--fill-box-shadow);
    animation-name: pulsA;
  }
  .loader::after {
    width: calc(var(--size) * 0.75);
    inset: 0;
    margin: auto;
    box-shadow: var(--box-shadow);
    animation-name: pulsB;
  }
  @keyframes pulsA {
    0% {
      box-shadow: inset var(--fill-box-shadow);
      opacity: 1;
    }
    50%,
    100% {
      box-shadow: inset var(--box-shadow);
      opacity: 0;
    }
  }
  @keyframes pulsB {
    0%,
    50% {
      box-shadow: var(--box-shadow);
      opacity: 0;
    }
    100% {
      box-shadow: var(--fill-box-shadow);
      opacity: 1;
    }
  }
</style>