UNPKG

1.83 kBTypeScriptView Raw
1import * as React from 'react';
2import { StandardProps } from '..';
3
4export interface CircularProgressProps
5 extends StandardProps<
6 React.HTMLAttributes<HTMLDivElement>,
7 CircularProgressClassKey,
8 'children'
9 > {
10 /**
11 * The color of the component. It supports those theme colors that make sense for this component.
12 */
13 color?: 'primary' | 'secondary' | 'inherit';
14 /**
15 * If `true`, the shrink animation is disabled.
16 * This only works if variant is `indeterminate`.
17 */
18 disableShrink?: boolean;
19 /**
20 * The size of the circle.
21 * If using a number, the pixel unit is assumed.
22 * If using a string, you need to provide the CSS unit, e.g '3rem'.
23 */
24 size?: number | string;
25 /**
26 * The thickness of the circle.
27 */
28 thickness?: number;
29 /**
30 * The value of the progress indicator for the determinate variant.
31 * Value between 0 and 100.
32 */
33 value?: number;
34 /**
35 * The variant to use.
36 * Use indeterminate when there is no progress value.
37 */
38 variant?: 'determinate' | 'indeterminate' | 'static';
39}
40
41export type CircularProgressClassKey =
42 | 'root'
43 | 'static'
44 | 'determinate'
45 | 'indeterminate'
46 | 'colorPrimary'
47 | 'colorSecondary'
48 | 'svg'
49 | 'circle'
50 | 'circleStatic'
51 | 'circleDeterminate'
52 | 'circleIndeterminate'
53 | 'circleDisableShrink';
54
55/**
56 * ## ARIA
57 *
58 * If the progress bar is describing the loading progress of a particular region of a page,
59 * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
60 * attribute to `true` on that region until it has finished loading.
61 * Demos:
62 *
63 * - [Progress](https://mui.com/components/progress/)
64 *
65 * API:
66 *
67 * - [CircularProgress API](https://mui.com/api/circular-progress/)
68 */
69export default function CircularProgress(props: CircularProgressProps): JSX.Element;