<div class="loader"></div>
.loader {
  --s: 100px; /* control the size */
  --c: linear-gradient(135deg,#00A8C6,#8FBE00); /* control the coloration */
  
  display: grid;
  place-items: center;
  place-content: center;
  margin: 0 calc(var(--s)/2);
}
.loader:before,
.loader:after{
  content: "";
  grid-area: 1/1;
}
.loader,
.loader:before,
.loader:after{
  height: var(--s);
  width: calc(var(--s)/5);
  border-radius: var(--s);
  background: var(--c) calc(50% + var(--_i,0)*50%)/var(--s) var(--s);
  transform: translate(calc(var(--_i,0)*200%));
  animation: l .6s infinite alternate calc(var(--_i,0)*.3s) both;
}
.loader:before {--_i: -1}
.loader:after  {--_i:  1}

@keyframes l {
  from {height: calc(var(--s)/2)}
}



body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
  background:pink;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.