<div class="loader"></div>
.loader {
--s: 70px;
--g: 15px;
width: calc(3*(1.353*var(--s) + var(--g)));
aspect-ratio: 3;
background:
linear-gradient(#ff1818 0 0) 0%/calc(100%/3) 100% no-repeat,
conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
#fff 135deg,#666 0 270deg,#aaa 0);
background-blend-mode: multiply;
--_m:
linear-gradient(to bottom right,
#0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0);
-webkit-mask: var(--_m);
mask: var(--_m);
background-size: calc(100%/3) 100%;
-webkit-mask-size: calc(100%/3) 100%;
mask-size: calc(100%/3) 100%;
-webkit-mask-composite: source-in;
mask-composite: intersect;
animation: load steps(3) 1.5s infinite;
}
@keyframes load {
to {background-position: 150%}
}
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
background: #000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.