The Material-ui progress components can be used to show a user how
far along he/she is in a process. These Material-ui progress bars
are built with two HTML elements, some CSS to set the width, and a
few attributes. Now keep reading some examples to see how
Material-ui Progress bars work.
Example
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import { useTheme } from " @material-ui/core/styles " ;
import Badge from " @material-ui/core/Badge " ;
import Box from " @material-ui/core/Box " ;
import LinearProgress from " @material-ui/core/LinearProgress " ;
// core components
import progressStyles from " assets/theme/components/linear-progress.js " ;
import badgeStyles from " assets/theme/components/badge.js " ;
const useStylesProgress = makeStyles ( progressStyles );
const useStylesBadge = makeStyles ( badgeStyles );
export default function CustomizedProgressBars () {
const classes = { ... useStylesProgress (), ... useStylesBadge () };
const theme = useTheme ();
const defaultObj = {
bar : classes . linearProgressDefault ,
};
const infoObj = {
bar : classes . linearProgressInfo ,
};
const successObj = {
bar : classes . linearProgressSuccess ,
};
const errorObj = {
bar : classes . linearProgressError ,
};
const warningObj = {
bar : classes . linearProgressWarning ,
};
const badgePositionRelative = {
badge : classes . badgePositionRelative + " " + classes . badgeRound ,
};
return (
<>
< Box
display = " flex "
justifyContent = " space-between "
alignItems = " center "
marginBottom = " 0.5rem "
>
< Badge
badgeContent = { " Task completed " }
color = " primary "
classes = { badgePositionRelative }
>< /Badge >
< Box
display = " inline-block "
component = " span "
fontWeight = " 600 "
color = { theme . palette . gray [ 600 ]}
>
60 %
< /Box >
< /Box >
< LinearProgress variant = " determinate " value = { 60 } classes = { defaultObj } / >
< Box
display = " flex "
justifyContent = " space-between "
alignItems = " center "
marginBottom = " 0.5rem "
>
< Badge
badgeContent = { " Task completed " }
color = " primary "
classes = { badgePositionRelative }
>< /Badge >
< Box
display = " inline-block "
component = " span "
fontWeight = " 600 "
color = { theme . palette . gray [ 600 ]}
>
60 %
< /Box >
< /Box >
< LinearProgress variant = " determinate " value = { 60 } / >
< LinearProgress variant = " determinate " color = " secondary " value = { 60 } / >
< Box
display = " flex "
justifyContent = " space-between "
alignItems = " center "
marginBottom = " 0.5rem "
>
< Badge
badgeContent = { " Task completed " }
color = " primary "
classes = { badgePositionRelative }
>< /Badge >
< Box
display = " inline-block "
component = " span "
fontWeight = " 600 "
color = { theme . palette . gray [ 600 ]}
>
60 %
< /Box >
< /Box >
< LinearProgress variant = " determinate " value = { 60 } classes = { infoObj } / >
< Box
display = " flex "
justifyContent = " space-between "
alignItems = " center "
marginBottom = " 0.5rem "
>
< Badge
badgeContent = { " Task completed " }
color = " primary "
classes = { badgePositionRelative }
>< /Badge >
< Box
display = " inline-block "
component = " span "
fontWeight = " 600 "
color = { theme . palette . gray [ 600 ]}
>
60 %
< /Box >
< /Box >
< LinearProgress variant = " determinate " value = { 60 } classes = { successObj } / >
< Box
display = " flex "
justifyContent = " space-between "
alignItems = " center "
marginBottom = " 0.5rem "
>
< Badge
badgeContent = { " Task completed " }
color = " primary "
classes = { badgePositionRelative }
>< /Badge >
< Box
display = " inline-block "
component = " span "
fontWeight = " 600 "
color = { theme . palette . gray [ 600 ]}
>
60 %
< /Box >
< /Box >
< LinearProgress variant = " determinate " value = { 60 } classes = { errorObj } / >
< Box
display = " flex "
justifyContent = " space-between "
alignItems = " center "
marginBottom = " 0.5rem "
>
< Badge
badgeContent = { " Task completed " }
color = " primary "
classes = { badgePositionRelative }
>< /Badge >
< Box
display = " inline-block "
component = " span "
fontWeight = " 600 "
color = { theme . palette . gray [ 600 ]}
>
60 %
< /Box >
< /Box >
< LinearProgress variant = " determinate " value = { 60 } classes = { warningObj } / >
< / >
);
}
Props
If you want to see more examples and properties please check the
official
Material-UI Documentation .