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