Morse code signal lamp loader

A signal lamp flashes the message in Morse code while a paper tape prints the dots and dashes.

Settings

Main color#ffb000

Secondary color#efe6d2

Size16px

Speed1x

Text

Code

index.html

<div class="uvq10-mrs" role="status"><span class="sr">Loading</span><div class="top" aria-hidden="true"><i class="lp"></i><span class="lt"></span><span class="cd"></span></div><div class="tp" aria-hidden="true"><div class="pr"><div class="sp"></div></div><i class="hd"></i></div></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.

Markdown version with all the code, for AI assistants

More in Loaders

See all Loaders

Circular spinner

LoadersReact + Motion

Bouncing dots

LoadersReact + Motion

Indeterminate progress bar

LoadersReact + Motion

Skeleton card

LoadersReact + Motion

Square to circle loader

LoadersHTML + CSS

Sliding tiles loader

LoadersHTML + CSS

3D cube loader

LoadersHTML + CSS

Self-drawing triangle

LoadersHTML + CSS

Where to use it

A short script turns the text into real Morse timing, with dots, dashes and gaps, and plays it on a glowing signal lamp. A paper tape slides under a print head and keeps the marks, while the current letter and its code appear in large mono type. It suits radio, maritime, telecom and puzzle themed sites.

Write the message in the text field; accents are removed and letters and digits are encoded. The main color lights the lamp and the head, the second sets the tape, and speed changes the unit length.