React Progress Bar - Argon

The ArgonProgress helps you to create a beautiful progress bar, It uses MUI LinearProgress in base and you can use all of the props from MUI LinearProgress for the ArgonProgress 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

// Argon Dashboard 2 MUI Components import ArgonProgress from "components/ArgonProgress";

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'infoChange ArgonProgress progress color.
valuenumber0Used to set ArgonProgress percentage.
variant'gradient''contained'containedChange the ArgonProgress background type.
labelboolfalseUsed to add the percentage label for ArgonProgress.
MUI PropsYou can pass all of the MUI LinearProgress props for the ArgonProgress as well.

Variants

// Argon Dashboard 2 MUI Components import ArgonProgress from "components/ArgonProgress";

With Label

// Argon Dashboard 2 MUI Components import ArgonProgress from "components/ArgonProgress"; 75%