CleenUI · Feedback · ProgressBar

ProgressBar

Linear progress indicator with percent, indeterminate mode, and label.

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

About ProgressBar

ProgressBar is the standard linear progress indicator. Pass a value from 0 to 100 to render determinate progress; omit the value for an indeterminate striped animation.

Label and percentage display can be enabled in any combination. Use it for file uploads, multi-step processes, and any user-facing long-running work.

When to use it

  • File upload and download progress.
  • Form completion percentage in long flows.
  • Multi-step process indicators.
  • Storage or quota meters.

Common props

Prop
Type
Description
value
number
Progress 0–100.
indeterminate
boolean
Striped animation when progress is unknown.
label
string
Label above the bar.
showValue
boolean
Render percentage value.
color
string
Color variant or token.
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.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with