Numeric Tunnel Loader

Overview

Numeric Tunnel gives a real wait a visible state: numbers move through real progress.

Use it for route latency, upload progress, asset warm-up, data loading, or WebGL initialization. Do not add a fake preloader to a fast page just to make it feel designed.

The production risk is dishonesty. Bind the loader to real state, use aria-busy where the region is updating, and never let a progress number claim completion before the content is ready.

Install

Usage

Component Code

Example Production Use Case

Use this as loading-state implementation guidance. Verify the shipped progress model, aria-busy behavior, live-region text, timer cleanup, skeleton fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps. Determinate progress must be tied to a real signal.

Best Used For

• Uploads, WebGL warm-up, and asset preloads where numeric progress reflects real state.
• Technical launch flows where the loading moment can carry brand tone without lying.
• Numeric Tunnel makes real waiting visible without manufacturing delay.

Not For

Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content.

Performance Budget

Tie animation to real load state, clean up timers, and avoid blocking first paint.

Accessibility and Mobile

Use aria-busy on loading regions and concise status text. On mobile and reduced motion, prefer static progress text or skeletons.

Common Mistakes

• Using Numeric Tunnel on a page that already loads quickly.
• Faking determinate progress.
• Announcing every animation frame to assistive technology.