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%](https://i.stack.imgur.com/acPdW.png)](https://i.stack.imgur.com/acPdW.png)
Note that the ends of the progress are the same aqua and lavender...
[![100%](https://i.stack.imgur.com/H6nQr.png)](https://i.stack.imgur.com/H6nQr.png)

Basically I want

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

```

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

```css
transform: translateX(-80%);

```

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

[![enter image description here](https://i.stack.imgur.com/PEWGU.png)](https://i.stack.imgur.com/PEWGU.png)

(With dev tools highlighting the element: )

[![Material ProgressBar with translate(-80%)](https://i.stack.imgur.com/I5fTJ.png)](https://i.stack.imgur.com/I5fTJ.png)

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.