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.
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.