ProgressBar

The ProgressBar component visually indicates the status of an ongoing operation, supporting determinate percentage values, indeterminate animated loading bars, custom metric labels, and semantic color variants.

Preview

Interactive

Upload Progress65%

Properties

Progress Value (%)

Color Variant

Track Size

Shape

Indeterminate

Label

Show Value Text

Live Code Snippet

import { ProgressBar } from '@moul-dev/ui';

export default function Example() {
  return (
    <ProgressBar value={65} label="Upload Progress" showValueText />
  );
}

Import

import { ProgressBar } from '@moul-dev/ui';

Interactive Demo

File Upload Progress60%

Memory Allocation960 MB / 1600 MB

Determinate vs Indeterminate

ProgressBar handles both bounded progress (e.g. value={65}) and indefinite loading states (isIndeterminate={true}):

Determinate (45%)45%

Indeterminate (Loading...)

// Determinate
<ProgressBar label="Determinate (45%)" value={45} />

// Indeterminate linear bar
<ProgressBar label="Indeterminate (Loading...)" isIndeterminate />

Color Variants

Choose between semantic color variants mapped directly to StyleX design system tokens:

Primary75%

Accent60%

Success95%

Warning50%

Error25%

Neutral40%

<ProgressBar label="Primary" value={75} variant="primary" />
<ProgressBar label="Accent" value={60} variant="accent" />
<ProgressBar label="Success" value={95} variant="success" />
<ProgressBar label="Warning" value={50} variant="warning" />
<ProgressBar label="Error" value={25} variant="error" />
<ProgressBar label="Neutral" value={40} variant="neutral" />

Sizes and Shapes

Select from sm (4px), md (8px), and lg (12px) track heights, and pill or square corners:

Small (sm) - Pill40%

Medium (md) - Pill60%

Large (lg) - Pill80%

Square Shape70%

<ProgressBar label="Small (sm)" value={40} size="sm" shape="pill" />
<ProgressBar label="Medium (md)" value={60} size="md" shape="pill" />
<ProgressBar label="Large (lg)" value={80} size="lg" shape="pill" />
<ProgressBar label="Square Shape" value={70} shape="square" />

Custom Value Labels

Use valueLabel to display formatted quantities, storage metrics, or steps:

Cloud Storage6.5 GB / 10 GB

Onboarding WizardStep 3 of 5

<ProgressBar
  label="Cloud Storage"
  value={65}
  valueLabel="6.5 GB / 10 GB"
  showValueText
/>

<ProgressBar
  label="Onboarding Wizard"
  value={60}
  valueLabel="Step 3 of 5"
  showValueText
  variant="accent"
/>

API Reference

Prop

Type

ProgressBar

Properties

On this page