circular-progress
v4.9.10arrow_drop_downThe color of the component. It supports those theme colors that make sense for this component.
If true
, the shrink animation is disabled.
This only works if variant is indeterminate
.
The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem’.
The thickness of the circle.
The value of the progress indicator for the determinate and static variants. Value between 0 and 100.
The variant to use. Use indeterminate when there is no progress value.
ARIA
If the progress bar is describing the loading progress of a particular region of a page,
you should use aria-describedby
to point to the progress bar, and set the aria-busy
attribute to true
on that region until it has finished loading.
Demos:
API:
ARIA
If the progress bar is describing the loading progress of a particular region of a page,
you should use aria-describedby
to point to the progress bar, and set the aria-busy
attribute to true
on that region until it has finished loading.
Name | Type | Description |
---|---|---|
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. |
className | string | |
color | 'inherit' | 'primary' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
disableShrink | custom | If |
size | number | string | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem’. |
style | object | |
thickness | number | The thickness of the circle. |
value | number | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. |
variant | 'determinate' | 'indeterminate' | 'static' | The variant to use. Use indeterminate when there is no progress value. |