CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uirotation
snack overflow
snack overflow

Reputation: 184

Rotate a Material UI LinearProgress

I'm trying to make a graph chart with Material UI using the LinearProgress component with some styling the basic idea is to get this to rotate 90deg

const BorderLinearProgressBottom = withStyles((theme) => ({
  root: {
    height: 50,
    borderRadius: 5,
  },
  colorPrimary: {
    backgroundColor:
      theme.palette.grey[theme.palette.type === "light" ? 200 : 700],
  },
  bar: {
    borderRadius: 5,
    backgroundColor: "#00A99E",
  },
  transform: [{ rotate: "90deg" }],
}))(LinearProgress);

gets my

 <BorderLinearProgressBottom
     variant="determinate"
     value={22}
     />

to look like this

enter image description here

How can I get it to rotate by 90deg?

I tried putting in the BorderLinearProgressBottom transform: [{ rotate: "90deg" }], but that did not work.

Code Sandbox

Upvotes: 2

Views: 3470

Answers (2)

MadeOfAir
MadeOfAir

Reputation: 3193

Here's how the same works in material-ui v5. First create a styled component:

const VerticalLinearProgress = styled(LinearProgress)(() => ({
  width: "16px",
  height: "100%",
  [`& .${linearProgressClasses.bar}`]: {
    backgroundColor: "#F5F6FA"
  },
  [`&.${linearProgressClasses.colorSecondary}`]: {
    backgroundColor: "#eb82bf"
  }
}));

Then you need to apply the progress as value and sx transform as follows:

const progress = 40

<VerticalLinearProgress
   variant="determinate"
   color="secondary"
   value={progress}
   sx={{
     [`& .${linearProgressClasses.bar}`]: {
       transform: `translateY(${-progress}%)!important`
     }
   }}
 />

Codesandbox example

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81663

Please don't use rotate(-90deg) if you want to display the LinearProgress vertically, it will break your layout because transform only scales the element visually without changing the size, so a rotated LinearProgress still occupies the space as if it's laid out horizontally. To rotate both its appearance and size, you should have a look at the implementation of Slider for reference. But I'll write it down for you now to save time.

First off you need to swap the height and width of the ProgressBar container:

// before
height: 50, // restrict the height
width: 'auto', // expand as long as you want (inside container)

// after
width: 50, // restrict the width
height: '100%', // expand as high as you want (inside container)

Then rotate the progress bar inside. This transform works because it only transforms 'locally' (the bar position is absolute inside the container).

bar: {
  // the default style uses translateX, so we need to switch the axis
  transform: ({ value }) => {
    return `translateY(${value}%) !important`;
  }
}

And that's it. You're done. Not it will look like a vertical Slider.

Live Demo

Codesandbox Demo

Upvotes: 1

Related Questions