15 Pure CSS Loading Animations 07 / 15
Liquid Blob
A gradient circle morphs its border-radius through organic blob shapes, creating a fluid, living feeling.
The code
<div class="blob"></div>
<div class="blob"></div>.blob {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
border-radius: 50%;
animation: blob 2.5s ease-in-out infinite;
}
@keyframes blob {
0%,
100% {
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
25% {
border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
}
50% {
border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%;
}
75% {
border-radius: 50% 50% 30% 70% / 30% 70% 50% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.blob,
.blob * {
animation: none !important;
}
}
.blob {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
border-radius: 50%;
animation: blob 2.5s ease-in-out infinite;
}
@keyframes blob {
0%,
100% {
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
25% {
border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
}
50% {
border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%;
}
75% {
border-radius: 50% 50% 30% 70% / 30% 70% 50% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.blob,
.blob * {
animation: none !important;
}
}