Usage

Props

NameTypeRequiredDefaultDescription
animated
boolean
false
since

10.19.0

aria-valuetext
string | ValueTextRender
false
a11y

Assistive technologies often present the value of aria-valuenow as a percentage. If this would not be accurate, use this property to make the progress bar value understandable.

since

11.8.0

Accessibility notes:
Assistive technologies often present the value of `aria-valuenow` as a percentage. If this would not be accurate, use this property to make the progress bar value understandable.
children
ReactNode
false
className
string
false

Additional classNames

style
CSSProperties
false

Additional CSS styles

value
number
true
since

10.19.0

animated

Add an animation to the background. When 100% the animation will stop. This prop does not define what "animated" means and is purely stylistic. This component uses the progressbar role and an implementation could include setting aria-busy on this element, or a grandparent if more content on the page should currently be "ignored" until something finishes.

If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. -- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

Demo