<div class="loader" style="color:green;"></div>
<div class="loader" style="color:red;width:120px;"></div>
<div class="loader" style="color:purple;width:80px;"></div>
.loader {
width: 150px; /* control the size */
aspect-ratio: 1;
display: grid;
-webkit-mask: conic-gradient(from 15deg, #0003,#000);
mask: conic-gradient(from 15deg, #0003,#000);
animation: load 1s steps(12) infinite;
}
.loader,
.loader:before,
.loader:after{
background:
radial-gradient(closest-side at 50% 12.5%,currentColor 90%,#0000 98%)
50% 0/20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,currentColor 90%,#0000 98%)
0 50%/80% 20% repeat-x;
}
.loader:before,
.loader:after{
content: "";
grid-area: 1/1;
transform: rotate(30deg);
}
.loader:after{
transform: rotate(60deg);
}
@keyframes load {
from {transform: rotate(0turn)}
to {transform: rotate(1turn)}
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
grid-auto-flow: column;
gap: 50px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.