<div class="loader"></div>
<div class="loader" style="--s:10px;--n:10;color:red"></div>
<div class="loader" style="--g:0px;color:darkblue"></div>
<div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>
.loader {
  --n:5;    /* control the number of stripes */
  --s:30px; /* control the width of stripes */
  --g:5px;  /* control the gap between stripes */
  
  width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height:30px;
  padding:var(--g);
  margin:5px auto;
  border:1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    no-repeat content-box;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}


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.