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