<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.