#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: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
  background:
   linear-gradient(#1b44af 0 0) bottom/100% 0% no-repeat
   #ddd;
  animation: l8 2s infinite steps(7);
}
@keyframes l8 {
    100% {background-size:100% 115%}
}

/* HTML: <div class="loader"></div> */
.loader{ width: 40px; aspect-ratio: 1; --c:no-repeat linear-gradient(var(--color-02) 0 0); background:  var(--c) 0    0,
    var(--c) 0    100%,
    var(--c) 50%  0,
    var(--c) 50%  100%,
    var(--c) 100% 0,
    var(--c) 100% 100%;
  background-size: 8px 50%; animation: l7-0 1s infinite; position: relative; overflow: hidden;}
.loader:before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--color-01); top: calc(50% - 4px); left: -8px; animation: inherit; animation-name: l7-1;}

@keyframes l7-0 {
 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 30%, 8px 30%}
}

@keyframes l7-1 {
 20%  {left:0px}
 40%  {left:calc(50%  - 4px)}
 60%  {left:calc(100% - 8px)}
 80%,
 100% {left:100%}
}