loading
HTML + CSSLoaders

Neon text loader

The word “loading” in thin letters that light up one by one, like a neon sign flickering to life.

Settings

72px
1x

Code

<div class="ul-nt"><span style="--i:0">l</span><span style="--i:1">o</span><span style="--i:2">a</span><span style="--i:3">d</span><span style="--i:4">i</span><span style="--i:5">n</span><span style="--i:6">g</span></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

Letters lighting up in sequence feel like a neon sign warming up at dusk. That suits a cocktail bar’s website, an arcade or retro game page or the ticket site of an independent cinema. Instead of an abstract shape, people read the word itself, which makes this text loading animation feel friendly and a bit theatrical.

You can swap the word for something that fits your brand, like the name of your bar or “open”; each letter is its own element, so the wave follows along. Like any neon, it wants a dark background and saturated colors.