@mixin loaderPseudo() {
  content: "";
  grid-area: 1/1;
  border: inherit;
  border-radius: 50%;
  animation: s5 2s infinite;
}
.loader {
  --loaderSize: 65px;
  width: var(--loaderSize); /* the size */
  border: 4px solid #0000;
  border-right-color: var(--loaderColor, var(--blue));

  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  animation: load 1s linear infinite;

  &:before {
    @include loaderPseudo();
    margin: 2px;
    animation: load 2s infinite;
  }
  &:after {
    @include loaderPseudo();
    margin: 8px;
    animation: load 3s infinite;
  }

  &.fade-move, /* apply transition to moving elements */
  &.fade-enter-active,
  &.fade-leave-active {
    transition: opacity 0.5s ease, width 0.5s ease;
  }

  &.fade-enter-from,
  &.fade-leave-to {
    opacity: 0;
    width: 0;
  }
}
@keyframes load {
  100% {
    transform: rotate(1turn);
  }
}