.loader {
  width: 120px;
  height: 60px;
  border-radius: 200px 200px 0 0;
  -webkit-mask: repeating-radial-gradient(
    farthest-side at bottom,
    #0000 0,
    #000 1px 12%,
    #0000 calc(12% + 1px) 20%
  );
  /* background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0)
    bottom/0% 0% no-repeat #ddd; */

  background: radial-gradient(
      farthest-side at bottom,
      #ff0000 0%,
      /* red */ #ffa500 20%,
      /* orange */ #ffff00 40%,
      /* yellow */ #008000 60%,
      /* green */ #0000ff 80%,
      /* blue */ #4b0082 95%,
      /* indigo */ #0000 100% /* transparent */
    )
    bottom/0% 0% no-repeat #ddd;

  animation: l10 2s infinite steps(6);
}

@keyframes l10 {
  100% {
    background-size: 120% 120%;
  }
}