About this snippet

Hold attention during data fetches with a liquid droplet loader. We merged bouncing CSS circles through a pure SVG gooey filter to construct a deeply satisfying visual waiting state.

Size
2.1 KB
Uses
HTML, CSS
Loads
Nothing external
Views
270
<div class="loader-scene">
  
  <svg style="display: none;">
    <defs>
      <filter id="drop-goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" 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 25 -10" result="goo"></feColorMatrix>
        <feBlend in="SourceGraphic" in2="goo"></feBlend>
      </filter>
    </defs>
  </svg>
  
  <div class="liquid-loader">
    <div class="drop main-drop"></div>
    <div class="drop falling-drop"></div>
  </div>
  
  <p class="loader-message">Processing data</p>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.loader-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.liquid-loader {
  position: relative;
  width: 100px;
  height: 150px;
  /* Apply the powerful gooey filter here */
  filter: url("#drop-goo");
  display: flex;
  justify-content: center;
}

.drop {
  background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
  border-radius: 50%;
  position: absolute;
}

.main-drop {
  bottom: 0;
  width: 60px;
  height: 60px;
  animation: pulse-main 2s infinite ease-in-out;
}

.falling-drop {
  top: -20px;
  width: 30px;
  height: 30px;
  animation: fall-merge 2s infinite cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

@keyframes pulse-main {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.2) scaleY(0.8); }
}

@keyframes fall-merge {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  80% { transform: translateY(100px) scale(0.8); opacity: 1; }
  100% { transform: translateY(120px) scale(0); opacity: 0; }
}

.loader-message {
  color: #64748b;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: text-blink 1.5s infinite alternate;
}

@keyframes text-blink {
  to { opacity: 0.4; }
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save