ProgressBar

feedback

Linear progress bar with single/segmented modes, status colors, size variants, striped/animated patterns, and indeterminate loading state. Fundamental UI primitive for pipeline stages, CI progress, and goal tracking.

Import

typescript
import { ProgressBar } from "packages/ui/src";

Props

ProgressBarProps

PropTypeRequired
valuenumberNo
segmentsProgressBarSegment[]No
statusdefault|success|warning|errorNo
sizesm|md|lgNo
showLabelbooleanNo
stripedbooleanNo
animatedbooleanNo
indeterminatebooleanNo
labelstringNo

Examples

Component Showcase

Progress Bar

Linear progress indicator with status colors, size variants, striped patterns, segmented mode, and indeterminate loading.

Interactive Playground

Size Variants

Small (4px)

Medium (8px)

Large (20px) with label

82%

Status Colors

Striped & Animated

Striped

Striped + Animated

Indeterminate

Segmented Mode

Pipeline Stages

Research
Design
Tokens
Implement
Deploy

CI Jobs

Build
Tests
Lint
Deploy

Real-World Use Cases

Token coverage344/400
Drift score100/100
Build progressCompiling...

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionLinear progress bar with single/segmented modes, status colors, size variants, striped/animated patterns, and indeterminate loading state. Fundamental UI primitive for pipeline stages, CI progress, and goal tracking.
PropsProgressBarProps (value?: number, segments?: ProgressBarSegment[], status?: default|success|warning|error, size?: sm|md|lg, showLabel?: boolean, striped?: boolean, animated?: boolean, indeterminate?: boolean, label?: string)
Statesdefault, success, warning, error, striped, animated, indeterminate, segmented
A11y
  • role=progressbar
  • aria-valuenow for determinate
  • aria-valuemin and aria-valuemax
  • aria-label for context
Responsive
  • Full-width on all breakpoints
  • Height scales with size prop
Motion
  • Fill width transition 0.4s ease
  • Stripe animation 1.5s linear infinite
  • Indeterminate bounce 1.5s ease-in-out infinite
Token Dependencies
  • components.progressBar.trackBackground
  • components.progressBar.trackBorderRadius
  • components.progressBar.fillDefault
  • components.progressBar.fillSuccess
  • components.progressBar.fillWarning
  • components.progressBar.fillError
  • components.progressBar.fillBorderRadius
  • components.progressBar.labelColor
  • components.progressBar.labelFontSize
  • components.progressBar.heightSm
  • components.progressBar.heightMd
  • components.progressBar.heightLg
  • components.progressBar.segmentGap
  • components.progressBar.glowOpacity
  • components.progressBar.stripeAngle
  • components.progressBar.animationDuration
Content Slotssegments[].label (string)
CMS Bindings
  • Value from CMS number field
  • Segments from CMS JSON
Test Cases
  • Renders with correct width for value
  • Clamps value to 0-100
  • Applies status class
  • Applies size class
  • Shows label in lg size
  • Renders striped pattern class
  • Renders indeterminate animation
  • Renders segments