<div class="loader" style="color:green;"></div>
<div class="loader" style="--c:255 0 0;width:120px;"></div>
<div class="loader" style="--c:125 0 255;width:80px;"></div>
.loader {
width: 150px; /* control the size*/
--c: 0 0 0; /* the color using the RGB format */
aspect-ratio: 1;
display: grid;
border-radius: 50%;
background:
linear-gradient(0deg ,rgb(var(--c)/50%) 30%,#0000 0 70%,rgb(var(--c)/100%) 0) 50%/5% 100%,
linear-gradient(90deg,rgb(var(--c)/25%) 30%,#0000 0 70%,rgb(var(--c)/75% ) 0) 50%/100% 5%;
background-repeat: no-repeat;
animation: load 1s infinite steps(12);
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: inherit;
opacity: 0.915;
transform: rotate(30deg);
}
.loader::after {
opacity: 0.83;
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.