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

.loader {
  width: 150px; /* control the size */
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  -webkit-mask: var(--c),var(--c),var(--c);
  -webkit-mask-size: 20% 50%;
  background: conic-gradient(#BFB35A 25%,#5E8C6A 0 75%,#8C2318 0) 0%/200% 100%;
  animation: 
    back 2s infinite steps(1),
    load 1s infinite linear;
}
@keyframes back{
  50% {background-position: 100%}
}
@keyframes load {
  0%  {-webkit-mask-position: 0% 100%,50% 100%,100% 100%} 
  20% {-webkit-mask-position: 0% 50% ,50% 100%,100% 100%} 
  40% {-webkit-mask-position: 0% 0%  ,50% 50% ,100% 100%} 
  60% {-webkit-mask-position: 0% 100%,50% 0%  ,100% 50% } 
  80% {-webkit-mask-position: 0% 100%,50% 100%,100% 0%  } 
  100%{-webkit-mask-position: 0% 100%,50% 100%,100% 100%} 
}

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