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