Progress

Progress and activity indicators are visual indications of an app loading content. A single visual indicator should be used to represent each type of operation. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

Indeterminate Circular

To show this type of Progress you will need this code in down here.

  
<CircularProgress/>
<CircularProgress size={50} />
<CircularProgress color="secondary"/>
<CircularProgress color="secondary" size={50} />
  

Determinate Circular

     
<CircularProgress variant="determinate" value={75} />
<CircularProgress
        size={50}
        variant="determinate"
        value={25}
        min={0}
        max={50} />
<CircularProgress color="secondary" variant="determinate" value={75} />
<CircularProgress
        color="secondary"
        size={50}
        variant="determinate"
        value={25}
        min={0}
        max={50} />
   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
classes	object		Useful to extend the style applied to components.
color	enum: 'primary' |  'secondary' |  'inherit'	'primary'	The color of the component. It supports those theme colors that make sense for this component.
size	union: number |  string	40	The size of the circle.
thickness	number	3.6	The thickness of the circle.
value	number	0	The value of the progress indicator for the determinate and static variants. Value between 0 and 100.
variant	enum: 'determinate' |  'indeterminate' |  'static'	'indeterminate'	The variant of progress indicator. Use indeterminate when there is no progress value.