Source: https://primereact.org/progressbar/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

ProgressBar

ProgressBar is a process status indicator.

Import#

---

import { ProgressBar } from 'primereact/progressbar';
         

Copy

Basic#

---

ProgressBar is used with the value property.

50%

<ProgressBar value={50}></ProgressBar>
         

Copy

Dynamic#

---

Value is reactive so updating it dynamically changes the bar as well.

0%

<ProgressBar value={value}></ProgressBar>
         

Copy

Template#

---

Custom content inside the ProgressBar is defined with the displayValueTemplate property.

40/100

<ProgressBar value={40} displayValueTemplate={valueTemplate}></ProgressBar>
         

Copy

Indeterminate#

---

For progresses with no value to track, set the mode property to indeterminate.

<ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
         

Copy

Accessibility#

---

Screen Reader

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">Status</span>
<ProgressBar aria-labelledby="label_status" />

<ProgressBar aria-label="Status" />
 

Copy

Keyboard Support

Not applicable.

• Import

• Basic

• Dynamic

• Template

• Indeterminate

• Accessibility

PrimeReact 10.9.7 by PrimeTek