Thermal receipt printer loader

A receipt feeds out of the slot in short jerks, pauses and is torn off to make room for the next one.

Settings

Main color#2b2d31

Secondary color#34d399

Size16px

Speed1x

Code

index.html

<div class="uvq10-tkt" role="status"><span class="sr">Printing receipt</span><div class="pr" aria-hidden="true"><i class="led"></i><i class="sl"></i></div><div class="win" aria-hidden="true"><div class="pp"><i class="hd"></i><b style="--w:52%"></b><b style="--w:68%"></b><b style="--w:44%"></b><b style="--w:60%"></b><i class="hr"></i><b class="tt" style="--w:38%"></b><i class="bc"></i></div></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

This loader draws a small thermal printer in CSS and pushes a paper receipt out of its slot with stepped motion, so it feels like a real print head at work. The ticket has lines, a total and a barcode, then tears away. It fits checkouts, order confirmations and point of sale screens.

Change the main color to restyle the printer body and the second color for the status light. Keep it next to a short message such as the order number, and slow it down when the wait is long.