ProgressBar

ProgressBar is a process status indicator.

Dynamic

Static

50%

Custom display value

40/100

Indeterminate

Import via Module


import { ProgressBar } from 'primereact/progressbar';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>

Getting Started

ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.


<ProgressBar value={value} />

Indeterminate is simplly enabled using mode property.


<ProgressBar mode="indeterminate" />

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	number	null	Current value of the progress.
showValue	boolean	true	Show or hide progress bar value.
unit	string	%	Unit sign appended to the value.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
mode	string	determinate	Defines the mode of the progress, valid values are "determinate" and "indeterminate".
color	string	null	Color for the background of the progress.
displayValueTemplate	Element	null	Custom display value template

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-progressbar	Container element.
p-progressbar-determinate	Container element of a determinate progressbar.
p-progressbar-indeterminate	Container element of an indeterminate progressbar.
p-progressbar-value	Element whose width changes according to value.
p-progressbar-label	Label element that displays the current value.