Nextjs Core Progress

-
Pro Component


Style

You will find the styles for this component in assets/jss/material-dashboard-pro/components/customLinearProgressStyle.js.

Example

60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
import React from 'react';
// core components
import CustomLinearProgress from "components/CustomLinearProgress/CustomLinearProgress.js";

export default function LinearProgress(){
  const successStyle = { width: "35%", display: "inline-block" };
  const warningStyle = { width: "20%", display: "inline-block" };
  const dangerStyle = { width: "45%", display: "inline-block" };
  return (
    <div>
      <CustomLinearProgress
        variant="determinate"
        color="primary"
        value={30}
      />
      <CustomLinearProgress
        variant="determinate"
        color="info"
        value={60}
      />
      <CustomLinearProgress
        variant="determinate"
        color="success"
        value={100}
        style={successStyle}
      />
      <CustomLinearProgress
        variant="determinate"
        color="warning"
        value={100}
        style={warningStyle}
      />
      <CustomLinearProgress
        variant="determinate"
        color="danger"
        value={25}
        style={dangerStyle}
      />
    </div>
  );
}

Props

CustomLinearProgress.defaultProps = {
  color: "gray"
};

CustomLinearProgress.propTypes = {
  color: PropTypes.oneOf([
    "primary",
    "warning",
    "danger",
    "success",
    "info",
    "rose",
    "gray"
  ])
};

If you wish to change this component, you should also check the following props from the base Material-UI components: