React Progress - Soft UI
The SoftProgress 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 SoftProgress 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 SoftProgress from "components/SoftProgress";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Change SoftProgress progress color. |
| value | number | 0 | Used to set SoftProgress percentage. |
| variant | 'gradient''contained' | contained | Change the SoftProgress background type. |
| label | bool | false | Used to add the percentage label for SoftProgress. |
| MUI Props | You can pass all of the MUI LinearProgress props for the SoftProgress as well. |
Variants
// Soft UI Dashboard React components
import SoftProgress from "components/SoftProgress";
With Label
// Soft UI Dashboard React components
import SoftProgress from "components/SoftProgress";