Skip to content
Site volume
Colourway

3D kit

Block loader

The MAKR letters hopping in a row while something loads, beside a literal status.

  • Beta
  • Expressive layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-three/css3d
On this page

A loading indicator built from the row arrangement: the four letter blocks hop one after another, 150 ms apart on a 1.2 s cycle, beside visible status text in a role="status" region. The words carry the meaning; the blocks are decoration.

Example#

Look of this example
Loading your quote
Live render of examples/block-loader/basic.tsx

Usage#

Use the block loader while something takes a moment: the MAKR letters hop in a row beside a literal status. It is the 3D kit's take on Loader, for bigger moments such as rendering a cover or sending a quote.

  • Label. label says what is loading; it is a polite status region.
  • Essential motion. A loader loops while mounted (WCAG 2.2.2 allows it for essential progress); unmount it when the work ends.

Layer and volume#

Art beside reading text. The hop is the same at Studio, Press and Rave; at Quiet the blocks stand still and the text stays.

Anatomy#

Loading your quote
The parts of examples/block-loader/basic.tsx, numbered:
  1. BlocksThe four letters, hopping in turn..mk-block-loader-row
  2. LabelThe status, in the reading layer..mk-block-loader-label

Volume#

  • Quiet

    Loading your quote

    Blocks still; the label stays.

  • Studio

    Loading your quote

    The hop.

  • Press

    Loading your quote

    The same.

  • Rave

    Loading your quote

    The same.

Content#

  • Say what is loading: "Loading your quote".

Do and don't#

Do

Loading your quote

Shown while waiting.

Don't

A block loader left on the page after the content has loaded.

A loop that outlives the wait.

A loader's loop is allowed because it means work is happening. Once the work is done, the loop is just noise.

Fidelities#

CSS 3D only (BlockCss faces in the house pose), so it needs @maxgrits/overprint-three/css and no JavaScript.

Performance#

Zero JavaScript; transform-only motion on four blocks.

Gating#

Reduced motion (the system setting or data-mk-motion="reduce") holds the blocks still. A loader is essential motion (WCAG 2.2.2), so it loops while it is mounted; unmount it when loading ends.

Accessibility#

  • role="status": screen readers hear the label when it changes, so say what is loading ("Loading your quote").
  • The blocks are aria-hidden art.

Props#

PropTypeDefaultDescription
labelReactNode"Loading"The visible status text (default "Loading").
sizenumber24Block size, px (default 24).
classNamestringnone
styleCSSPropertiesnone

Generated from BlockLoaderProps in packages/overprint-three/src/css3d/block-loader.tsx.

Tokens#

System tokens (17)

Its own properties (2)

  • --mk-3d-print
  • --mk-s

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorgenerators, threeThree: the alphabet twins at every fidelity (model, SVG, CSS 3D, GL geometry, physics shapes; Rave's MORE BLOCKS rains them), the row, topple, twins, stack-1/2/3, line-k/r/a/m and wood arrangements with their text alternatives, the page objects Crate, PlanPlate, Slot, SampleCase and Baseplate, BlockLoader, Topple404, BuildOnScroll, the house camera and an id-colour parity mode in poster frames, the wood grain in GL, specks and Shake, the phone's tap-to-play light rung with "Done", and InkFieldMaterial (the field backdrop in the stage's own canvas). Read the whole entry