ProgressBar

Display linear progress indicators for loading states and task completion.

Import


import { ProgressBar } from "@raydenui/ui";

Usage

Basic

60%


<ProgressBar value={60} />

Sizes

40%


<ProgressBar size="sm" value={40} />  {/* 4px height */}
<ProgressBar size="md" value={40} />  {/* 8px height */}
<ProgressBar size="lg" value={40} />  {/* 12px height */}

Segmented Type

Display progress as 10 discrete segments instead of a continuous bar.

70%


<ProgressBar type="segmented" value={70} />

With Label

Uploading files...

75%


<ProgressBar value={75} label="Uploading files..." />

With Metadata

Estimated time: 2 min

60%

25 MB / 50 MB•2:30 remaining•Fast

45%


// Single metadata item
<ProgressBar value={60} metadata="Estimated time: 2 min" />
 
// Multiple metadata items (dot-separated)
<ProgressBar
  value={45}
  metadata={["25 MB / 50 MB", "2:30 remaining", "Fast"]}
/>

Percentage Position

75%


// Bottom (default)
<ProgressBar value={75} percentagePosition="bottom" />
 
// Top
<ProgressBar value={75} percentagePosition="top" />
 
// Hidden
<ProgressBar value={75} showPercentage={false} />

Complete Example

Downloading update...65%

128 MB / 200 MB•5 min left


<ProgressBar
  value={65}
  size="lg"
  type="basic"
  label="Downloading update..."
  metadata={["128 MB / 200 MB", "5 min left"]}
  showPercentage
  percentagePosition="top"
/>

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value (0-100)
`size`	`"sm" \| "md" \| "lg"`	`"lg"`	Bar height: sm (4px), md (8px), lg (12px)
`type`	`"basic" \| "segmented"`	`"basic"`	Continuous or segmented bar
`label`	`string`	—	Label text above the bar
`metadata`	`string \| string[]`	—	Metadata text(s) below the bar
`showPercentage`	`boolean`	`true`	Show percentage text
`percentagePosition`	`"top" \| "bottom"`	`"bottom"`	Position of percentage text
`className`	`string`	—	Additional CSS classes

Accessibility

Uses role="progressbar" with ARIA attributes
aria-valuenow, aria-valuemin, aria-valuemax set correctly
Works with screen readers