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