Progress

Progress bars and indicators.

On This Page

Progress bars and indicators.

Indicators for loading, loading stages, and task completion status.

determinate progressKnown task duration (file downloads, data processing, setup installers)

indeterminate progressUnknown task duration (connecting to network database, uploading assets)

progress ringCircular widgets in dash boards representing scores, CPU loads, or stats values

Live CanvasInteractive

Controls(2)

value

number

Current progress percentage value (0-100)

className

text

Additional CSS classes for custom styling

Generated JSX

import { Progress } from "nexoreui"

<Progress />

component.tsx

component.tsx

65%

component.tsx

75%

Progress

component.tsx

CartShippingPayment

component.tsx

Page 1 of 3

Prop	Type	Default	Description
value	number	`0`	The progress value percentage from 0 to 100.
isIndeterminate	boolean	`false`	Enables infinite loading marquee animation.
progressLabel	string	`"Loading..."`	Visual text label shown during loading states.
className	string	`—`	Additional custom class names.

Progress Role: Automatically maps role="progressbar".
Range Attributes: Renders aria-valuenow, aria-valuemin="0", and aria-valuemax="100" representing loading scale attributes natively.

On This Page