Material-UI Progress

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

Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Copy
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.