<div class="loader"></div>
.loader {
width: 200px; /* control the size */
aspect-ratio: 1;
display: grid;
background: linear-gradient(135deg,#00A8C6,#8FBE00);
clip-path: inset(10%);
}
.loader:before {
content: "";
padding: 10%;
--_g: no-repeat content-box radial-gradient(50% 50%,#000 95%,#0000);
background: var(--_g),var(--_g),var(--_g),var(--_g),#fff;
background-size: 20% 20%;
filter: blur(5px) contrast(20);
mix-blend-mode: lighten;
animation: l 3s infinite,s 3s infinite;
}
@keyframes l {
0%,
100%{background-position:top ,right ,bottom,left }
20% {background-position:center,right ,bottom,left }
40% {background-position:center,center,bottom,left }
60% {background-position:center,center,center,left }
80% {background-position:center,center,center,center}
}
@keyframes s{
0%,
25%,
90%{background-size: 20% 20%,20% 20%,20% 20%,20% 20%}
40%,
45%{background-size: 30% 30%,20% 20%,20% 20%,20% 20%}
60%,
65%{background-size: 40% 40%,20% 20%,20% 20%,20% 20%}
80%{background-size: 50% 50%,20% 20%,20% 20%,20% 20%}
}
body {
margin:0;
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.