HTML + CSSLoaders
Pulse and ripple loader
A small core that breathes in and out while sending soft rings outward, like a signal going out.
Settings
72px
1x
Code
<div class="ul-rip"><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
Rings spreading from a center read as “searching nearby” or “sending a signal”. Use this ripple loader when a ride app looks for a driver, when an app pairs a speaker over Bluetooth or when a delivery map is locating the courier. The core breathes gently in step, so the whole thing feels alive rather than mechanical.
At small sizes it doubles as a live status dot, next to “Live” on a streaming page or on a courier’s position on a map. Leave generous space around it; the rings grow to about three times the core.