Liquid fill loader
A round glass that fills up with a gently rolling wave until it is full, then empties and starts again.
Settings
Code
<div class="ul-wv"></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
Filling up is an easy metaphor to read: water in a glass, charge in a battery, coffee in a cup. Use this liquid fill loader in a hydration tracker, on the charging screen of an electric car app or while a café’s ordering site prepares your drink. Two wave layers roll at different speeds, which keeps the surface looking alive.
Give it room at a medium or large size, so the wave is visible. A short line underneath, like “Brewing your order”, turns it from a generic spinner into a small moment. The second color sits behind the first, so a lighter tint of the main color works well.