/* HTML: <div class="cd_v-ellipses-loader"></div> */
.threedots {
    width: 60px;
    aspect-ratio: 4;
    background: radial-gradient(circle closest-side,#fff 90%,#0000) 0/calc(100%/3) 100% space;
    clip-path: inset(0 100% 0 0);
    animation: l1 1s steps(4) infinite;
    color: #fff;
  }
  @keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}


  /* HTML: <div class="loader"></div> */
.loader2 {
    width: 100px;
    height: 40px;
    --g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#fff calc(100% - 3px) 98%,#0000 101%) no-repeat;
    background: var(--g), var(--g), var(--g);
    background-size: 30px 30px;
    animation: l9 1s infinite alternate;
  }
  @keyframes l9 {
    0% {
      background-position: 0 50%, 50% 50%, 100% 50%;
    }
    20% {
      background-position: 0 0, 50% 50%, 100% 50%;
    }
    40% {
      background-position: 0 100%, 50% 0, 100% 50%;
    }
    60% {
      background-position: 0 50%, 50% 100%, 100% 0;
    }
    80% {
      background-position: 0 50%, 50% 50%, 100% 100%;
    }
    100% {
      background-position: 0 50%, 50% 50%, 100% 50%;
    }
  }


  /* HTML: <div class="loaderdots"></div> */
.loaderdots {
    width: 100px;
    height: 40px;
    --g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#fff calc(100% - 3px) 98%,#0000 101%) no-repeat;
    background: var(--g), var(--g), var(--g);
    background-size: 30px 30px;
    animation: l9 1s infinite alternate;
  }
  @keyframes l9 {
    0% {
      background-position: 0 50%, 50% 50%, 100% 50%;
    }
    20% {
      background-position: 0 0, 50% 50%, 100% 50%;
    }
    40% {
      background-position: 0 100%, 50% 0, 100% 50%;
    }
    60% {
      background-position: 0 50%, 50% 100%, 100% 0;
    }
    80% {
      background-position: 0 50%, 50% 50%, 100% 100%;
    }
    100% {
      background-position: 0 50%, 50% 50%, 100% 50%;
    }
  }