Progressbar
Use Progressbar to show progress, completion, scarcity, or funnel step status.
Content settings
| Setting | What it controls |
|---|---|
| Progress value | The amount or percentage shown. |
| Label text | Text shown with the bar. |
| On complete | Behavior after completion when available. |
Style settings
| Style area | What you can adjust |
|---|---|
| Wrapper | Horizontal alignment and gap. |
| Bar | Width, height, filled color, empty color, border, and radius. |
| Label | Typography and color. |
| Spacing | Margin, padding, and responsive layout. |
Best practices
- Use truthful progress values.
- Do not use fake scarcity bars.
- Check mobile width and label wrapping.
Testing notes
- Preview the bar at the smallest mobile width used by your audience.
- Confirm the label still makes sense if the progress value changes.
- Check contrast between the filled and empty colors so the progress amount is visible.
FAQ
When should I use Progressbar?
Use it to show completion, step status, capacity, or simple progress that helps visitors understand where they are or how much remains.
What should I configure before publishing a progress bar?
Confirm the progress value, label text, completion behavior if available, bar width and height, filled and empty colors, border, radius, typography, and spacing.
Can I use Progressbar for scarcity?
Only use it for real scarcity or truthful progress. Avoid fake availability bars because they can damage trust and create compliance issues.
What should I check if the progress value looks wrong?
Review the configured value, label copy, responsive bar width, and color contrast. If the bar is tied to a flow, test the relevant step transition.