Sun Jun 07 2026
Unicode Loaders
animation
react
css
unicode
A collection of animated loaders built purely with unicode block characters and CSS animations — no SVG, no canvas, no libraries.
How these work
Every loader on this page is built from the same four unicode block characters — █ ▓ ▒ ░ — stacked in layers with staggered animation-delay values. The heaviest block █ leads, and each lighter character trails slightly behind it, creating the illusion of a comet with a fading tail.
The track is always a static layer of ░ characters sitting underneath. The moving blocks render on top with a background color matching the page — so as they travel, they appear to carve through the track rather than float above it. No SVG. No canvas. No external libraries. Just monospace characters, transform: translate(), and @keyframes.
Loaders
What's next
These are all variations on one core idea — unicode characters as pixels, CSS as the engine. The constraint of monospace grids turns out to be surprisingly expressive: every path reduces to ch units and translate keyframes, and every new shape is just a new set of corners to connect.
Every loader here is fully self-contained with styles inlined, so you can drop any one into your project by copying a single component.