Circular progress indicator

Provide feedback of progress to users while loading.

Props

message
string
Loading message displayed below the progress indicator.
progress
number
Sets the progress value (0–100). When omitted, an infinite spinner is shown.
size
GoabCircularProgressSize
Sets the size of the progress indicator.
Defaults to large.
testId
string
Sets a data-testid attribute for automated testing.
variant
GoabCircularProgressVariant
Controls the display mode. 'fullscreen' stretches across the full screen; 'inline' is used within content.
Defaults to inline.
visible
boolean
Controls visibility of the progress indicator, allowing a fade transition to be applied.
message
string
Loading message displayed under the progress indicator.
progress
number
Set the progress value. Setting this value will change the type from infinite to progress.
size
GoabCircularProgressSize
Size of the progress indicator.
testId
string
Sets a data-testid attribute for automated testing.
variant
GoabCircularProgressVariant
Stretch across the full screen or use it inline.
visible
boolean
Show/hide the page loader. This allows for fade transition to be applied in each transition.
message
string
Loading message displayed under the progress indicator
progress
number
Set the progress value. Setting this value will change the type from infinite to progress
Defaults to -1.
size
GoabCircularProgressSize small | large
Size of the progress indicator
Defaults to large.
testId
string
Sets a data-testid attribute for automated testing.
variant
GoabCircularProgressVariant fullscreen | inline
Stretch across the full screen or use it inline
Defaults to inline.
visible
boolean
Show/hide the page loader. This allows for fade transition to be applied in each transition.
Defaults to false.
Examples
Examples show common usage patterns and implementation guidance.

Other

Use CircularProgress for page-level or blocking operations. Use Skeleton for content placeholders while loading.

Do
Choose the right loading indicator for your context.

Content

Don't
Don't place a full sentence in the indicator's label.
Do
Keep loading messages short and concise.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

Related components

Linear progress indicator

Provide visual feedback to users while loading.
View old component docs