/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  --c: no-repeat linear-gradient(#046d8b 0 0);
  background: var(--c) 0 0, var(--c) 100% 0, var(--c) 100% 100%, var(--c) 0 100%;
  animation: l10-1 2s infinite linear, l10-2 2s infinite linear;
}
.loader::after {
  margin: 25%;
  transform: scale(-1);
}
@keyframes l10-1 {
  0% {
    background-size: 0 4px, 4px 0, 0 4px, 4px 0;
  }
  12.5% {
    background-size: 100% 4px, 4px 0, 0 4px, 4px 0;
  }
  25% {
    background-size: 100% 4px, 4px 100%, 0 4px, 4px 0;
  }
  37.5% {
    background-size: 100% 4px, 4px 100%, 100% 4px, 4px 0;
  }
  45%,
  55% {
    background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
  }
  62.5% {
    background-size: 0 4px, 4px 100%, 100% 4px, 4px 100%;
  }
  75% {
    background-size: 0 4px, 4px 0, 100% 4px, 4px 100%;
  }
  87.5% {
    background-size: 0 4px, 4px 0, 0 4px, 4px 100%;
  }
  100% {
    background-size: 0 4px, 4px 0, 0 4px, 4px 0;
  }
}

@keyframes l10-2 {
  0%,
  49.9% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  }
  50%,
  100% {
    background-position: 100% 0, 100% 100%, 0 100%, 0 0;
  }
}

/* HTML: <div class="loader"></div> */
.loader-secondary {
  width: 55px;
  aspect-ratio: 1;
  --g1: conic-gradient(from  90deg at 3px  3px, #0000 90deg, #000 0);
  --g2: conic-gradient(from -90deg at 22px 22px, #0000 90deg, #000 0);
  background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  animation: l7 1.5s infinite;
}

@keyframes l7 {
  0%   {background-position: 0    0,    0 100%, 100% 100%}
  25%  {background-position: 100% 0,    0 100%, 100% 100%}
  50%  {background-position: 100% 0,    0 0,    100% 100%}
  75%  {background-position: 100% 0,    0 0,    0    100%}
  100% {background-position: 100% 100%, 0 0,    0    100%}
}