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.
Types
Don't
Don't use the fullscreen variant for quick operations. For anything under a second, use inline or Spinner. When part of a page is loading but the rest can show, use Skeleton to load progressively instead of blocking the whole view.
Tip
Pick the loading indicator that matches the context. Use CircularProgress with the inline variant for a section of the page that's loading. Use the fullscreen variant when the whole page is loading and the user can't do anything else yet. Use Skeleton when part of the page can show while the rest loads, so users see structure right away instead of an empty space.
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.
States
Warning
CircularProgress is hidden by default. Always set visible={true} to show it.
Content
Tip
Provide a message prop to explain what operation is in progress, like "Loading your application" or "Saving changes."
Do
Keep loading messages short and concise.
Don't
Don't place a full sentence in the indicator's label.
