Water drop loader
A single drop falls, hits the surface and spreads two soft ripples before the next one comes.
Settings
Code
<div class="ul-drop"><b></b><i></i><i></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
A falling drop feels calm and a little zen, so this loader suits a spa’s booking page, a skincare brand selling moisturizers or a weather app fetching the rain forecast. It also fits a water utility checking a meter reading. The drop falls, touches the surface and sends out two rings, one slightly after the other.
Slow it down a touch for wellness brands; the pause between drops is part of the effect. It needs vertical room to fall, so it looks cramped inside buttons. Blues and teals are the obvious choice, but a single warm color works for coffee or oils.