Progress

Displays an indicator showing the completion progress of a task.

tsx

<Progress value={60} />

Progress — barre horizontale qui indique une progression 0..100%. Utile pour upload, install, batch operation. Pour un état "en cours indéterminé", préférer Spinner.

Installation

Terminal

$ bext ui add progress

Usage

tsx

1
2
3import { Progress } from "@bext-stack/ui/primitives"

<Progress value={60} />

Anatomy

<Progress value={0..100} />

API Reference

Progress

Prop	Type	Default	Description
value	number	0	Pourcentage 0..100.
className	string	—	undefined

Accessibility

Devrait porter role="progressbar" aria-valuenow aria-valuemin aria-valuemax.

Try it live Open in play

Edit this example live in the bext playground — it compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A progress bar shows completion of a task. The filled portion is
// a coloured inner div whose width is the percentage.
function Bar({ value }) {
  return (
    <div style={{ width: "100%", height: 10, borderRadius: 9999, background: "#f1f5f9", overflow: "hidden" }}>
      <div style={{ width: value + "%", height: "100%", background: "#0a0a0a", borderRadius: 9999, transition: "width 200ms ease" }} />
    </div>
  );
}

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Progress</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>An indicator of task completion.</p>
      <div style={{ display: "grid", gap: 18, marginTop: 22, maxWidth: 360 }}>

The React idiom — same UI, for comparison.

← Popover Radio Group →

On This Page