Water Drop Loader

<div class="ldr-water-drop" role="status" aria-label="Loading">
  <span class="ldr-water-drop-drop"></span>
  <span class="ldr-water-drop-ring"></span>
  <span class="ldr-water-drop-ring"></span>
  <span class="ldr-water-drop-jet"></span>
</div>

.ldr-water-drop {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.1);
}
.ldr-water-drop-drop {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) / 5);
  height: calc(var(--s) / 5);
  margin-left: calc(var(--s) / -10);
  border-radius: 0 50% 50% 50%;
  background: var(--c);
  animation: ldr-water-drop-fall 1.8s infinite;
}
.ldr-water-drop-ring {
  position: absolute;
  top: 84%;
  left: 50%;
  width: var(--s);
  height: calc(var(--s) * 0.3);
  margin: calc(var(--s) * -0.15) 0 0 calc(var(--s) * -0.5);
  box-sizing: border-box;
  border: calc(var(--s) / 20) solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: ldr-water-drop-ring 1.8s cubic-bezier(0.15, 0.6, 0.35, 1) -1.15s infinite;
}
/* Each ripple starts at impact (0.65s) and lives a full cycle, overlapping the next fall. */
.ldr-water-drop-ring + .ldr-water-drop-ring { animation-delay: -0.9s; }
.ldr-water-drop-jet {
  position: absolute;
  top: 84%;
  left: 50%;
  width: calc(var(--s) / 9);
  height: calc(var(--s) / 9);
  margin: calc(var(--s) / -18);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: ldr-water-drop-jet 1.8s infinite;
}
@keyframes ldr-water-drop-fall {
  0%   { transform: translateY(0) scale(0.3) rotate(45deg); opacity: 0; animation-timing-function: ease-out; }
  10%  { transform: translateY(0) scale(1) rotate(45deg); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  36%  { transform: translateY(calc(var(--s) * 0.76)) scale(0.85, 1.15) rotate(45deg); opacity: 1; }
  37%, 100% { transform: translateY(calc(var(--s) * 0.76)) scale(0.85, 1.15) rotate(45deg); opacity: 0; }
}
@keyframes ldr-water-drop-ring {
  0%   { transform: scale(0.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes ldr-water-drop-jet {
  0%, 38% { transform: translateY(0) scale(0.3); opacity: 0; animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); }
  52%     { transform: translateY(calc(var(--s) * -0.32)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); }
  66%     { transform: translateY(0) scale(0.6); opacity: 0.8; }
  68%, 100% { transform: translateY(0) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-water-drop, .ldr-water-drop *, .ldr-water-drop::before, .ldr-water-drop::after, .ldr-water-drop *::before, .ldr-water-drop *::after {
    animation-duration: 3s;
  }
}

Similar loaders