/* HTML: <div class="loader"></div> */
.loader1 {
    width: 20px;
    aspect-ratio: 1;
    /* color: #f03355; */
    color: aliceblue;
    position: relative;
    background:
      conic-gradient(from 134deg at top   ,currentColor 92deg,#0000 0) top,
      conic-gradient(from -46deg at bottom,currentColor 92deg,#0000 0) bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
  }
  .loader1:before {
    content:'';
    position: absolute;
    inset: 0;
    --g:currentColor 14.5px,#0000 0 calc(100% - 14.5px),currentColor 0;
    background:
      linear-gradient( 25deg,var(--g)),
      linear-gradient(-25deg,var(--g));
     animation: l7 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l7 {
     33%  {inset:-10px;transform: rotate(0deg)}
     66%  {inset:-10px;transform: rotate(90deg)}
     100% {inset:0    ;transform: rotate(90deg)}
  }


  /* HTML: <div class="loader"></div> */
.loader2 {
    width: 20px;
    height: 20px;
    --c:no-repeat linear-gradient(orange 0 0);
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 21px 21px;
    animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:50px;height: 50px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:50px;height: 50px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}


/* HTML: <div class="loader2"></div> */
.loader3 {
    width: 40px;
    aspect-ratio: 1;
    background: 
      linear-gradient(45deg,#fff 50%, #f03355 0),
      linear-gradient(45deg,#f03355 50%,#fff 0),
      linear-gradient(-45deg,#fff 50%,#f03355 0),
      linear-gradient(-45deg,#f03355 50%,#fff 0),
      linear-gradient(#f03355 0 0);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    animation: l18 1.5s infinite;
  }
  @keyframes l18{
    0%   {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
    25%  {background-position:0  100%,100%  0,50%  50% ,50% 50%,50% 50%}
    50%  {background-position:0  100%,100%  0,100% 100%,0   0  ,50% 50%}
    75%  {background-position:50% 50%,50% 50%,100% 100%,0   0  ,50% 50%}
    100% {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
  }