<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.