HTML + CSSLoaders

Rocket launch loader

A little rocket rumbling on the launch pad while puffs of smoke billow out underneath.

Settings

72px
1x

Code

<div class="ul-rk"><div class="ul-rk-b"></div><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></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 rocket about to take off is the perfect picture for “we’re shipping it”. Use this loader when a hosting platform deploys a site, when an email tool sends a newsletter campaign or on the launch page of a startup before the big reveal. The body shakes and the smoke clouds grow and fade, full of energy.

It works best right before a moment worth celebrating, so follow it with a clear success state. The window stays white and the fins use the second color, so a bold main color with a contrasting accent gives the most cartoon-like result.