feedback / stable

TopProgressBar

2px primary bar at the top of the viewport for page-level loading; hidden for work under 120ms.

LIVE PREVIEW

Loading preview…

When to use

Navigations and route-level data loads (Next apps: NextTopProgressBar from @revido-llc/kit/next).

import { TopProgressBar } from '@revido-llc/kit';

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


active (required)	boolean	—	True while work (usually a navigation) is in progress.
className	string	—
delay	number	120	Wait this long (ms) before showing, so fast work shows nothing. Default 120.
label	string	"Loading"	Accessible name. Default "Loading".

The bar runs along the top of this preview (in an app it pins to the top of the viewport). Fast work (< 120ms) shows nothing.

<TopProgressBar active={isNavigating} />
// Next.js root layout:
<NextTopProgressBar />

Static component anatomy; bind events in the consuming app.

<TopProgressBar active={false} />