Linear progress indicator

Provide visual feedback to users while loading.

Props

ariaLabel
string
Accessible label for the progress bar.
ariaLabelledBy
string
ID of the element that labels this progress bar.
percentVisibility
"visible" | "hidden" | undefined
Controls visibility of the percentage text.
Defaults to visible.
progress
number | null
Progress value (0-100). When undefined, shows an indeterminate loading animation.
testId
string
Sets a data-testid attribute for automated testing.
ariaLabel
string
Accessible label for the progress bar.
ariaLabelledBy
string
ID of the element that labels this progress bar.
percentVisibility
"visible" | "hidden" | undefined
Controls visibility of the percentage text.
progress
number | null | undefined
Progress value (0-100). When undefined, shows an indeterminate loading animation.
testid
string
Sets a data-testid attribute for automated testing.
ariaLabel
string
Accessible label for the progress bar.
ariaLabelledBy
string
ID of the element that labels this progress bar.
percentVisibility
"visible" | "hidden"
Controls visibility of the percentage text.
Defaults to visible.
progress
number
Progress value (0-100). When undefined, shows an indeterminate loading animation.
testId
string
Sets a data-testid attribute for automated testing.
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Screen Readers

Do
Provide accessible labels for LinearProgress

Related components

Circular progress indicator

Provide feedback of progress to users while loading.
View old component docs