CustomLinearProgress

We've decided to extend the default material-ui linear progress to make it more easier for you to use our styles.

Styles

You will find the styles for this component in
src/assets/jss/nextjs-material-kit/components/customLinearProgressStyle.js.

Example

import React from 'react';
// core components
import CustomLinearProgress from "/components/CustomLinearProgress/CustomLinearProgress.js";

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

Props

You can pass additional props from the default material-ui linear progress.

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

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