پیشنمایش زنده
کد HTML
<div class="loader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"></feGaussianBlur><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></feColorMatrix><feBlend in="SourceGraphic" in2="goo"></feBlend></filter></defs></svg></div>
کد CSS
.loader {
position: relative;
width: 1.5em;
aspect-ratio: 1/2;
filter: url(#goo);
}
#goo {
display: none
}
.loader:before, .loader:after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 100%;
aspect-ratio: 1/1;
animation: 1.5s ease-out infinite loader;
border-radius: 50%;
}
.loader:before {
background: linear-gradient(rgb(255, 206, 58), rgb(66, 181, 73))
}
.loader:after {
animation-delay: 0.75s;
background: linear-gradient(to top, rgb(114, 223, 231), rgb(66, 181, 73))
}
@keyframes loader {
0%, 50%, 100% {
transform: translateY(0)
}
25% {
transform: translateY(70%)
}
75% {
transform: translateY(-70%)
}
}