Loading Bar
Shows global navigation progress and exposes application-wide loading controls.
@rivetui/loading-barPreview
Explore each composition interactively, then open its code in the same context.
Default
Anchor indeterminate navigation progress to the application edge without shifting content.
Application shell
Indeterminate navigation progress remains anchored to the top edge without shifting layout.
Global controller
Start, update, complete, or reset the shared bar from any descendant of LoadingBarProvider.
Idle
Determinate progress
Provide a numeric value when the operation exposes measurable progress.
Note
Set active={false} or call reset() to return the global bar to its idle state.
24%
68%
100%
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
Install component
bunx --bun shadcn@latest add @rivetui/loading-barPublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
LoadingBar
| Prop | Type | Default |
|---|---|---|
active | boolean | true |
value | number | — |
position | "fixed" | "absolute" | "fixed" |
label | string | "Loading page" |
LoadingBarProvider
| Prop | Type | Default |
|---|---|---|
position | "fixed" | "absolute" | "fixed" |
label | string | "Loading page" |
completionDuration | number | 200 |
useLoadingBar
| Member | Type | Default |
|---|---|---|
start | (label?: string) => void | — |
setProgress | (value: number, label?: string) => void | — |
complete | () => void | — |
reset | () => void | — |