Feedbackexperimental

Pixel loaders

Four retro-digital loading states: a heart, blocks, a bar and a full-screen pulse.

Brand moments, empty states, first paint.

Inline, beside a label or inside a button.

Indeterminate flow, or real progress with a value.

Whole-page or large-container loading. Wraps its own centred content and can pin itself over the viewport.

scrolls inside this frame

Customize

Sharedapplies to every loader in the gallery

Colourcolor

Speed1.00speed

Heart size96size

Pixel gap0.340gap

Pausedpaused

Variantsper-loader animation styles

HeartheartVariant

BlocksblocksVariant

Bar shows progressdeterminate

Bar value0.45value

TSX

<PixelHeart />

Generated from the controls above. Only props that differ from their defaults are shown.

8 documented props on PixelHeart
Property	Type	Default	Description
`color`	`string`	`"#f4a04f"`	Colour.
`speed`	`number`	`1`	Speed. Range 0.25 to 3.
`size`	`number`	`96`	Heart size. Range 32 to 200.
`gap`	`number`	`0.34`	Pixel gap. Range 0 to 3.
`paused`	`boolean`	`false`	Paused.
`variant`	`"pulse" \| "blink"`	`"pulse"`	PixelHeart animation style.
`value`	`number`	`—`	PixelBar progress from 0 to 1. Omit for an indeterminate bar.
`label`	`string`	`"Loading"`	Announced by screen readers while the loader is visible.

0 external runtime dependencies

Ships with nothing but React.

Experimental: still under evaluation and not part of the published package yet.