<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 22deg, #0003,#000);
          mask: conic-gradient(from 22deg, #0003,#000);
  animation: load 1s steps(12) infinite;
}
.loader,
.loader:before,
.loader:after{
  --_g: linear-gradient(currentColor 0 0) 50%; /* update the color here */
  background: 
    var(--_g)/34% 5%  space no-repeat,
    var(--_g)/5%  34% no-repeat space;
}
.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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.