Progress

The Progress component displays the completion status of a task or process. It supports determinate progress, striped styles, animations, labels, and utility props.

Import

import { Progress } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Progress values

Control the progress using the now, min, and max props.

Labels

Display the progress percentage automatically.

Custom content

Render custom content inside the progress bar.

Colors

Use utility props to customize the progress bar color.

Striped

Apply a striped appearance.

Animated

Animate the striped background.

Multiple bars

Combine multiple progress bars within a single progress container.

Utility props

All utility props provided by Prime are supported.

API

Progress

Prop	Type	Default	Description
children	ReactNode	—	One or more Progress.Bar components.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Progress.Bar

Prop	Type	Default	Description
children	ReactNode	—	Custom content displayed inside the bar.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
now	number	0	Current progress value.
min	number	0	Minimum progress value.
max	number	100	Maximum progress value.
displayedPercent	boolean	false	Displays the computed percentage as text.
striped	boolean	false	Applies a striped appearance.
animated	boolean	false	Animates the striped background.