React MUI: Create stacked progress bar by disabling buffer animation

secretshardul 0
Viewed 27

Buffering progress bar

I want a stacked progress bar tracking two fields:

  1. valueBuffer: amount unlocked out of total. The light blue bar.
  2. value: amount claimed out of unlocked. The dark blue bar.

Variant buffered suits my use case but the dotted line animation is annoying. How do I disable the animation and replace it with a regular bar?

<LinearProgress variant="buffer" value={50} valueBuffer={70} />

If this is not possible, what is the alternative to have a bootstrap style stacked progress bar?

bootstrap

progress-bar material-ui reactjs
1 Answers

You can use add a custom style to .MuiLinearProgress-dashed and modify the default dashed styles using sx attribute like this:

<LinearProgress
    variant="buffer"
    value={progress}
    valueBuffer={buffer}
    sx={{
      "& .MuiLinearProgress-dashed": {
        backgroundColor: "lightgrey",
        backgroundImage: "none",
        animation: "none"
      }
    }}
/>

You can take a look at this sandbox for a live working example of this solution.

Ahmet Emre Kılınç0
Related