<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>
Back to Snippets
Liquid Droplet Loader Animation CSS
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.
156