<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;
}