Progress

Shows completion for a known process. 4px bar; the label carries the percentage.

Preview

Uploading40%

In action

Run

Alkmaar / 06:00

Issue 03 is on the cylinder. Forty percent through the run.

On press40%

When to use

Use it for

Determinate progress with a known total.
label to show the name and the percentage above the bar.

Not for

Unknown duration; use Spinner.
Static ratios like storage used; a number reads better.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Progress } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/progress.

2. Vendor the source

npx @noorddev/vlak-cli add progress

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/progress.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Progress } from "@noorddev/vlak-react";

<Progress label="Uploading" value={40} />
<Progress value={3} max={5} aria-label="Steps done" />

Props

Progress

Prop	Type	Default	Description
`value`required	`number`
`max`	`number`	`100`
`label`	`ReactNode`		Label above the bar; it names the bar. The percentage lives here, never inside the bar.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

Renders role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext as a percentage.
label names the bar through aria-labelledby; without one, pass aria-label.

Markup

<div class="rs-progress-head"><span id="upload-label">Uploading</span><span>40%</span></div><div class="rs-progress" role="progressbar" aria-labelledby="upload-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"><span class="rs-progress-fill" style="width:40%"></span></div>

Classes

.rs-progress.rs-progress-head.rs-progress-fill