#loader{ width: 100%; height: 100%; background: var(--color-bg); position: fixed; top: 0px; left: 0px; z-index: 9999; display: flex; align-items: center; justify-content: center;}

.loader {
  width: 40px;
  aspect-ratio: 1;
   --c: linear-gradient(var(--color-01) 0 0);
   --m: radial-gradient(farthest-side, var(--color-02) 92%,#0000);
  background:
    var(--c),var(--m),
    var(--c),var(--m),
    var(--c),var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: l17 1s infinite linear;
}
@keyframes l17 {
  0%,5% {background-position: 0 50%, 0 0, 50% 50%, 50% 0, 100% 50%, 100% 0}
  12.5% {background-position: 0 50%, 0 calc(50% - 10px), 50% 50%, 50% 0, 100% 50%, 100% 0}
  25%   {background-position: 0 calc(50% + 10px), 0 50%, 50% 50%, 50% 0, 100% 50%, 100% 0}
  37.5% {background-position: 0 calc(50% + 10px), 0 50%, 50% 50%, 50% calc(50% - 10px), 100% 50%, 100% 0}
  50%   {background-position: 0 50%, 0 0, 50% calc(50% + 10px),50% 50%, 100% 50%, 100% 0}
  62.5% {background-position: 0 50%, 0 0, 50% calc(50% + 10px),50% 50%, 100% 50%, 100% calc(50% - 10px)}
  75%   {background-position: 0 50%, 0 0, 50% 50%, 50% 0, 100% calc(50% + 10px), 100% 50%}
  87.5% {background-position: 0 50%, 0 0, 50% 50%, 50% 0, 100% calc(50% + 10px), 100% 50%}
  95%,
  100%  {background-position: 0 50%, 0 0, 50% 50%, 50% 0, 100% 50%, 100% 0}
}