Circular progress indicator
Provide feedback of progress to users while loading.
Props
variant
fullscreen | inline
Stretch across the full screen or use it inline
Defaults to
inline.
size
small | large
Size of the progress indicator
Defaults to
large.
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.
visible
boolean
Show/hide the page loader. This allows for fade transition to be applied in each transition.
Defaults to
false.
testId
string
Sets a data-testid attribute for automated testing.
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."
Don't
Don't place a full sentence in the indicator's label.
Do
Keep loading messages short and concise.
