<div class="loader"></div>
.loader {
  width: 150px;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c);
  background-size: 20% 50%;
  animation: load 1s infinite linear;
}
@keyframes load {
  0%  {background-position: 0% 100%,50% 100%,100% 100%} 
  20% {background-position: 0% 50% ,50% 100%,100% 100%} 
  40% {background-position: 0% 0%  ,50% 50% ,100% 100%} 
  60% {background-position: 0% 100%,50% 0%  ,100% 50% } 
  80% {background-position: 0% 100%,50% 100%,100% 0%  } 
  100%{background-position: 0% 100%,50% 100%,100% 100%} 
}

body {
  margin:0;
  min-height:100vh;
  display: grid;
  place-items:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.