SuiProgress
The SuiProgress helps you to create a beautiful progress bar, It uses MUI LinearProgress in base and you can use all of the props from MUI LinearProgressfor the SuiProgress component.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// Soft UI Dashboard React components
import SuiProgress from "components/SuiProgress";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Change SuiProgress progress color. |
| value | number | 0 | Used to set SuiProgress percentage. |
| variant | 'gradient''contained' | contained | Change the SuiProgress background type. |
| label | bool | false | Used to add the percentage label for SuiProgress. |
| MUI Props | You can pass all of the MUI LinearProgress props for the SuiProgress as well. |
Variants
// Soft UI Dashboard React components
import SuiProgress from "components/SuiProgress";
With Label
// Soft UI Dashboard React components
import SuiProgress from "components/SuiProgress";