React MaterialUI LinearProgress with gradient

user_391198 0
Viewed 1890

I would like to customize the look of MaterialUI's LinearProgress component so that the bar denoting completeness is a gradient, so that regardless of length, the left side is color A and the right side is color B, and the gradation is quick or slow depending on the length of the bar. 20% Note that the ends of the progress are the same aqua and lavender... 100%

Basically I want

background-image: linear-gradient(to right, #6fcbb6, #9c64f4);
width: 20%;

However, Material seems to set the progress of bar like this:

transform: translateX(-80%);

Meaning that if I style the progress bar with a gradient, it looks like this:

enter image description here

(With dev tools highlighting the element: )

Material ProgressBar with translate(-80%)

Is there a way to customize the LinearProgress component to have it display progress in the way that I indicated above? I'd like to keep using Material components but I'm wondering if it would just be easier to make my own progress bar component in this case.

material-ui reactjs
2 Answers

would something like this work for you?

const {LinearProgress, makeStyles} = MaterialUI

const useStyles = makeStyles({
  root: {
    height: 10,
    borderRadius: 5
  },
  bar: ({ progress }) => ({
    borderRadius: 5,
    background: `linear-gradient(90deg, #6fcbb6 ${100 - progress}%, #9c64f4 100%)`
  })
});

const Progress = ({ progress = 20 }) =>  {
  const classes = useStyles({ progress });

  return (
      <LinearProgress
        classes={{ root: classes.root, bar: classes.bar }}
        variant="determinate"
        value={progress}
      />
  );
}

ReactDOM.render(<Progress />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

user_112471750

You can stagger it like this:

const {LinearProgress, makeStyles} = MaterialUI

const useStyles = makeStyles({
  root: {
height: 5,
borderRadius: 5
  },
  bar: ({ props }) => ({
borderRadius: 5,
backgroundImage: `linear-gradient(90deg, rgba(74,211,255,1) 30% 
${props.value > 60 ? `,rgba(158,220,190,1) 60%` : ""} 
${props.value > 85 ? `,rgba(255,171,0,1) 90%` : ""} 
${props.value > 95 ? `,rgba(255,0,0,1) 100%` : ""})`,
  }),
});

const Progress = (props) =>  {
  const classes = useStyles({ props });

  return (
      <LinearProgress {...props}
        classes={{ root: classes.root, bar: classes.bar }}
      />
  );
}

ReactDOM.render(<div><Progress value={70} variant="determinate" /><p/><Progress value={100} variant="determinate" /></div>, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

user_11420100
Related