ProgressBar

A horizontal progress indicator showing completion percentage.

Default

A simple progress bar showing completion percentage.

tsx

<ProgressBar value={60} />

Installation

tsx

import { ProgressBar } from "madagent";

Colors

tsx

<div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
  <ProgressBar value={60} />
  <ProgressBar value={60} color="accent" />
  <ProgressBar value={60} color="positive" />
  <ProgressBar value={60} color="negative" />
</div>

With Value

25%

60%

90%

tsx

<div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
  <ProgressBar value={25} showValue />
  <ProgressBar value={60} showValue color="accent" />
  <ProgressBar value={90} showValue color="positive" />
</div>

Animated

tsx

<div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
  <ProgressBar value={60} animated />
  <ProgressBar value={45} animated color="accent" />
  <ProgressBar value={80} animated color="positive" />
</div>

API Reference

Prop	Type	Default	Description
`value`	`number`	-	Current progress value (0–100)
`max`	`number`	`100`	Maximum value
`color`	`"accent""info""positive""warning""negative"`	`"accent"`	Bar color using semantic tokens
`label`	`string`	-	Accessible label for screen readers
`showValue`	`boolean`	`false`	Shows percentage text above the bar
`animated`	`boolean`	`false`	Adds a subtle shimmer/stripe animation to the filled portion

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

60%

Usage

tsx

<div style={{ display: "flex", flexDirection: "column", gap: 24, width: "100%", maxWidth: 400, margin: "0 auto" }}>
  <ProgressBar value={60} showValue />
  <ProgressBar value={40} animated color="info" />
  <ProgressBar value={80} color="positive" />
</div>