ProgressBar

An unstyled progress bar component for displaying process completion status.

Build fully custom progress indicators with complete control over layout and styling.

50%

basic-demo

Pre-styled Versions

Choose a pre-styled library to use ProgressBar with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Track, Indicator, Label, Value
Normalizes value to a 0-100 percentage with configurable min/max bounds
Determinate and indeterminate modes for known and unknown progress
Configurable formatter function for custom display text

Usage#

import { ProgressBar } from 'primereact/progressbar';

<ProgressBar.Root>
    <ProgressBar.Track>
        <ProgressBar.Indicator>
            <ProgressBar.Label>
                <ProgressBar.Value />
            </ProgressBar.Label>
        </ProgressBar.Indicator>
    </ProgressBar.Track>
</ProgressBar.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<ProgressBar.Root as="section"></ProgressBar.Root>
<ProgressBar.Track as="span"></ProgressBar.Track>

Default elements: Root=div, Track=div, Indicator=div, Label=div, Value=span.

Render Function Children#

Root accepts a render function as children, providing access to the component instance.

<ProgressBar.Root value={50}>{(instance) => <span>{instance.state.computedValue}%</span>}</ProgressBar.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

50%

/* Select a part to see its CSS selector for custom styling */

API#

ProgressBarRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ProgressBarRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ProgressBarRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ProgressBarRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ProgressBarRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ProgressBarRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`number`	—
Current value of the progress.
`max`	`number`	—
Defines the mode of the progress
`min`	`number`	—
Defines the mode of the progress
`formatter`	`(value: number) => string`	—
Custom formatter function to format the display value
`mode`	`"indeterminate"` \| `"determinate"`	`determinate`
Defines the mode of the progress
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"progressbar"`
`data-part`	`"root"`

Defines passthrough(pt) options of ProgressBar component.

label	type	description
root	ProgressBarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
label	ProgressBarRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the label's DOM element.
value	ProgressBarRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the value's DOM element.
track	ProgressBarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the track's DOM element.
indicator	ProgressBarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the indicator's DOM element.

ProgressBarTrack#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ProgressBarTrackInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ProgressBarTrackInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ProgressBarTrackInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ProgressBarTrackPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ProgressBarTrackInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"progressbar"`
`data-part`	`"track"`

Defines passthrough(pt) options of ProgressBarTrack component.

label	type	description
root	ProgressBarTrackPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ProgressBarIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ProgressBarIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ProgressBarIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ProgressBarIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ProgressBarIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ProgressBarIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"progressbar"`
`data-part`	`"indicator"`

Defines passthrough(pt) options of ProgressBarIndicator component.

label	type	description
root	ProgressBarIndicatorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ProgressBarLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ProgressBarLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ProgressBarLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ProgressBarLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ProgressBarLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ProgressBarLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"progressbar"`
`data-part`	`"label"`

Defines passthrough(pt) options of ProgressBarLabel component.

label	type	description
root	ProgressBarLabelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ProgressBarValue#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ProgressBarValueInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ProgressBarValueInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ProgressBarValueInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ProgressBarValuePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ProgressBarValueInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"progressbar"`
`data-part`	`"value"`

Defines passthrough(pt) options of ProgressBarValue component.

label	type	description
root	ProgressBarValuePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.

<span id="label_status" />
<ProgressBar.Root aria-labelledby="label_status" />
 
<ProgressBar.Root aria-label="Status" />

Keyboard Support#

Not applicable.