Progress

A progress component is a visual indicator that shows the completion status of a task or process in real-time and can be either determinate, displaying specific progress, or indeterminate, indicating ongoing activity without a known endpoint.

Currently, two types of progress components are available: CircularProgress and LinearProgress.

Circular

Expand code


<CircularProgress/>

Size

Use the size prop to modify the components size. By default, the size is set to 30.

Expand code


<CircularProgress size={30}/>
<CircularProgress size={50}/>
<CircularProgress size={'70px'}/> // you can also use px or rem units

Deterministic

If the value prop is provided, the component switches to a determinate loading state, reflecting specific progress.

Expand code


<CircularProgress value={25}/>
<CircularProgress value={50}/>
<CircularProgress value={75}/>
<CircularProgress value={value}/>

The component utilizes a CSS transition to enable smoother animations, with a default duration of 250ms. If you need to update the value prop more rapidly, consider adjusting the CSS variable --uil-progress-delay.

Color

The color prop allows you to change the color of the loading spinner.

Expand code


<CircularProgress color={'info'}/>
<CircularProgress color={'success'}/>
<CircularProgress color={'warning'}/>
<CircularProgress color={'error'}/>
<CircularProgress color={'#ba26f8'}/>

Linear

Expand code


<LinearProgress/>

Size

Modify the height of the progress-bar. By default, the height is set to 5.
The progress-bar will always match the width of its parent component.

Expand code


<LinearProgress size={3}/>
<LinearProgress size={6}/>
<LinearProgress size={'9px'}/> // you can also use px or rem units

Deterministic

If the value prop is provided, the component switches to a determinate loading state, reflecting specific progress.

Expand code


<LinearProgress value={25}/>
<LinearProgress value={50}/>
<LinearProgress value={75}/>
<LinearProgress value={value}/>

Color

The color prop allows you to change the color of the progress-bar.

Expand code


<LinearProgress color={'info'}/>
<LinearProgress color={'success'}/>
<LinearProgress color={'warning'}/>
<LinearProgress color={'error'}/>
<LinearProgress color={'#ba26f8'}/>

Props

Name	Type	Default	Description
aria-label	`string`	Linear/Circular progressbar	Sets the aria-label attribute for the node with the role progressbar
color	`string`	info	color of the component
dark	`boolean`	false	Use the darkmode style
size	`number` \| `string`	30 \| 5	Increase or decrease the components size
value	`number`	-	Switches the component to a determinate state