<div class="loader"></div>

.loader {
  width: 180px; /* control the size */
  aspect-ratio: 8/5;
  background: 
    conic-gradient(red   50%,blue   0) no-repeat,
    conic-gradient(green 50%,purple 0) no-repeat;
  background-size: 200% 50%;
  animation: back 4s infinite steps(1);
}
@keyframes back {
  0%,
  100%{background-position: 0%   0%,0%   100%}
  25% {background-position: 100% 0%,0%   100%}
  50% {background-position: 100% 0%,100% 100%}
  75% {background-position: 0%   0%,100% 100%}
}

body {
  margin:0;
  min-height:100vh;
  display:grid;
  place-content:center;
}