CleenUI · Feedback · AdvancedProgressBar

AdvancedProgressBar

Stepped progress bar with named milestones, completion timestamps, and per-step error states.

storybook.cleenui.com · feedback-advancedprogressbar--default
Open in new window

About AdvancedProgressBar

AdvancedProgressBar is the multi-stage variant. Pass an array of milestones, each with a label and status (pending, in-progress, complete, error), and the bar renders a connected sequence of dots with the bar fill reflecting overall progress.

Click a milestone to see its timestamp and any error details. Use it for long-running operations with distinct phases — deployments, batch imports, integration sync runs.

When to use it

  • Deployment progress through environments.
  • Order or shipment tracking with named stages.
  • Multi-step background jobs (data sync, batch processing).
  • Onboarding progress with named checkpoints.

Common props

Prop
Type
Description
milestones
Milestone[]
Ordered milestones {label, status, timestamp, error}.
currentIndex
number
Index of the active milestone.
showTimestamps
boolean
Display per-step timestamps.
onMilestoneClick
(milestone) => void
Click handler.
vertical
boolean
Render vertically instead of horizontally.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.