<div class="mask"></div>
+
<div class="back"></div>
=
<div class="loader"></div>

.mask {
  width: 120px; /* control the size */
  aspect-ratio: 1;
  background: #000;
  -webkit-mask: radial-gradient(50% 50%,#000 96%,#0000) left/35% 35% no-repeat;
  animation: load 2s infinite;
}
@keyframes load {
  25% {-webkit-mask-position: top   }
  50% {-webkit-mask-position: right }
  75% {-webkit-mask-position: bottom}
}

.back {
  width: 120px; 
  aspect-ratio: 1;
  background: conic-gradient(from 45deg,#046D8B 25%,#93A42A 0 50%,#2FB8AC 0 75%,#ECBE13 0); /* the colors here */
}

.loader {
  width: 120px; 
  aspect-ratio: 1;
  background: conic-gradient(from 45deg,#046D8B 25%,#93A42A 0 50%,#2FB8AC 0 75%,#ECBE13 0);
  -webkit-mask: radial-gradient(50% 50%,#000 96%,#0000) left/35% 35% no-repeat;
  animation: load 2s infinite;
}
@keyframes load {
  25% {-webkit-mask-position: top   }
  50% {-webkit-mask-position: right }
  75% {-webkit-mask-position: bottom}
}

body {
  margin:0;
  min-height:100vh;
  display:grid;
  place-content:center;
  align-items:center;
  grid-auto-flow:column;
  gap:20px;
  font-size:50px;
  font-weight:bold;
}