/* HTML: <div class="loader"></div> */
.loader {
    width: 80px;
    aspect-ratio: 1;
    display: flex;
    transform-origin: 0% 150%;
    animation: l20-0 2s infinite linear;
  }
  .loader:before,
  .loader:after {
    content: "";
    flex: 1;
    background: #f03355;
    animation: l20-1 1s infinite linear alternate;
    border-radius: 100px 0 0 100px;
    transform-origin: 100% 100%;
  }
  .loader:after {
    border-radius: 0 100px 100px 0;
    transform-origin: 0% 100%;
    --s:-1;
  }
  @keyframes l20-0 {
     0%,10%   {transform:translateY(0)     scaleY(1)}
     49.99%   {transform:translateY(-100%) scaleY(1)}
     50%      {transform:translateY(-100%) scaleY(-1)}
     90%,100% {transform:translateY(-200%) scaleY(-1)}
  }
  @keyframes l20-1 {
     0%,20%  {transform:rotate(0deg)                    translate(0,0)     rotate(0deg)}
     50%     {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,0)     rotate(0deg)}
     100%    {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,-20px) rotate(calc(var(--s,1)*-90deg))}
  }

.loader-content {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
  }
  .loader-content:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    --c:#0000, #f03355 1deg 120deg,#0000 121deg;
    background:
      conic-gradient(from 0deg,  var(--c)) top right,
      conic-gradient(from 120deg,var(--c)) bottom,
      conic-gradient(from 240deg,var(--c)) top left;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    animation: l25 2s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l25 {
     33%  {inset:-8px;transform: rotate(0deg)}
     66%  {inset:-8px;transform: rotate(180deg)}
     100% {inset:0   ;transform: rotate(180deg)}
  }