<div class="loader"></div>
.loader {
--s: 100px; /* control the size */
--c: linear-gradient(135deg,#00A8C6,#8FBE00); /* control the coloration */
display: grid;
place-items: center;
place-content: center;
margin: 0 calc(var(--s)/2);
}
.loader:before,
.loader:after{
content: "";
grid-area: 1/1;
}
.loader,
.loader:before,
.loader:after{
height: var(--s);
width: calc(var(--s)/5);
border-radius: var(--s);
background: var(--c) calc(50% + var(--_i,0)*50%)/var(--s) var(--s);
transform: translate(calc(var(--_i,0)*200%));
animation: l .6s infinite alternate calc(var(--_i,0)*.3s) both;
}
.loader:before {--_i: -1}
.loader:after {--_i: 1}
@keyframes l {
from {height: calc(var(--s)/2)}
}
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.