Spin a Material UI LinearProgress

I'm attempting to create a graph chart using Material UI with the LinearProgress component and adding some custom styling. My goal is to rotate it by 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);

using the following code:

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

This should result in a rotation like that shown in the image below:

https://i.sstatic.net/ormnDm.png

How can I achieve this rotation of 90deg?

I have attempted to add 

transform: [{ rotate: "90deg" }],
within the BorderLinearProgressBottom but unfortunately, it didn't work as expected.

Code Sandbox link for reference

javascriptcssreactjsmaterial-uirotation

Answer №1

If you're trying to display the LinearProgress component vertically, avoid using rotate(-90deg) as it will disrupt your layout. The transform property only visually scales the element without changing its size, so a rotated LinearProgress will still take up horizontal space. To properly adjust both appearance and size, consider looking at how Slider is implemented for guidance.

Here's what you need to do:

// Before
height: 50,
width: 'auto',

// After
width: 50,
height: '100%',

Next, rotate the progress bar within the container by adjusting the transform property to translate the Y axis:

bar: {
  transform: ({ value }) => {
    return `translateY(${value}%) !important`;
  }
}

That's all there is to it. Your LinearProgress will now appear as a vertical Slider.

Live Demo

https://codesandbox.io/s/69469405-rotate-a-mui-component-q7te3?file=/demo.js

Answer №2

Here's a simple guide on implementing material-ui v5 components. Start by creating a custom styled component:

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

Next, apply the progress value and transformation using value and sx:

const progress = 40

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

For a live example, check out this Codesandbox demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Omit the tag from the submission section

Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...

jqueryhtmlcsstagssubmit

I am facing issues with jQuery's live and livequery functions when trying to use them with a form that is being loaded dynamically through

Previously, I inquired about a related issue regarding attaching behavior to an element with jQuery after insertion. However, I have not yet found a solution. For clarity's sake, I am posing a new question with a different scenario. Below is the code ...

javascriptjqueryajaxlivelivequery

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

javascriptjqueryhtmljson

Enhancing server error troubleshooting with Next.js: improved stack trace visibility?

When a server error happens on Next.js, the call stack only provides information about the specific component where the error is located without offering any further guidance. For instance, in /pages/index.js, I have a component named Test. Within this co ...

javascriptreactjsnext.js

Error: Unable to retrieve data through Ajax request

$(document).ready(function(){ /* Fetching Data from TTC for Union Station */ $.getJSON("http://myttc.ca/Union_station.json?callback=?", function(data){ if (routes.length > 0) { // Display the stop details with departur ...

javascriptjqueryjson

Optimizing images for CSS background in Next.js

How can I efficiently optimize background images in styled-components using Next.js new feature, without relying on the Image component? ...

reactjsnext.jsstyled-componentsimage-optimizationnextjs-image

The "smiley" character added to the information during an Ajax call

Encountering an unusual issue. A colon (:) character is being appended to the JSON data sent to the server via AJAX request. https://example.com/image1.png The colon character seems to appear after sending the JSON, but it does not show up when inspectin ...

javascriptjqueryangularjsjsonajax

Transform a Javascript string variable into plain text within a pre-existing text document

Currently, I am storing user input from an HTML input as a JavaScript variable. The objective is to convert this data into plain text and save it in an existing text file. Essentially, each time the user provides input, it should be converted to plaintext ...

javascripthtml

Vue's TreeView component has been encountering issues with accurately displaying the contents of sub

Currently working on creating a customized TreeView in Vue. Check out my progress in the code here. The issue I'm facing is that the subfolders' content (such as child folder 1) is not displaying correctly. Additionally, collapsing the subfolder ...

javascriptvue.jstreeviewvue-component

Exploring jQuery Efficiency: Comparing CSS and Animation Techniques

I am trying to steer clear of using the animation property because it tends to be slower compared to CSS3 animations. My query is whether utilizing the css method is faster than the animation property, but still slower than a direct CSS3 animation with tr ...

jqueryperformancecssjquery-animate

Employing on() for triggering a form submission

I am attempting to attach a submit event handler to a form that may not always be present in the DOM, so I am using .on(): $('body').on("form","submit", function(e){}) However, when checking Firebug, it shows: $("body").on is not a function ...

javascriptjqueryjquery-events

Steps to Incorporate jQuery Function in a Partial View Inside a Modal

My jquery button click method is functioning correctly in views outside of modals, but the uploadbtn button click method does not work when a partial view is loaded in the modals. <script src="~/lib/jquery/dist/jquery.min.js"></script> ...

javascriptjqueryasp.net-core.net-core

Issues with ng-repeat causing the Angular Editable table to malfunction

<table class="table table-bordered"> <tbody> <tr ng-repeat="playerOrTeam in template.editableTable track by $index"> <td style="text-align: center;" ng-repeat="playerOrTeamCat in playerOrTeam track by $index"> ...

javascriptangularjs

Troubleshooting a dysfunctional collapsed navbar in React with Bootstrap 5

I am experiencing an issue where the collapsed navbar icon does not expand when clicked on smaller screens. I followed the example provided by bootstrap 5 and made sure to include bootstrap css/js and jquery. class CustomNavBar extends Component { re ...

javascripthtmlcssreactjsbootstrap-5

Looking to update this jQuery pop-up menu script to be compatible with Ajax functionality

I came across this script at The issue arises when the script is called multiple times, resulting in a cascade of pop-outs within pop-outs. I am currently exploring ways to prevent the execution of the script if the pop-out has already been set. Below is ...

javascriptjqueryajax

Using track by in ng-repeat function triggers an endless $digest-loop issue

It appears that I am still struggling to grasp the mechanism behind ng-repeat, $$hashKeys, and track by. Currently, in my project, I am working with AngularJS 1.6. The Issue: I have an array of complex objects that I want to display as a list in my view ...

javascriptangularjsangularjs-ng-repeat

Why is my snapshot returning null, even though there are values in the Firebase Database?

I am currently facing an issue in my code related to the snapshot. Specifically, I am trying to retrieve the value of quantity from my Firebase Database. Here's a snapshot of my database: and firebase.database().ref("mycart/"+uid+"/"+imguid).once ...

javascriptfirebasefirebase-realtime-database

Comparing getServerSideProps with direct data fetching in React

Could you shed some light on the getServerSideProps feature in NextJS? The documentation provides the following explanation. For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can write ge ...

reactjsnext.js

Creating a variable by using a conditional operation in JavaScript

When the statement <code>name = name || {} is used, it throws a reference error. However, using var name = name || {} works perfectly fine. Can you explain how variable initialization in JavaScript functions? ...

javascript

Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

I am having trouble with a ContentEditable div that requires the hiding of characters, specifically the first and last character. I need to overlay a layer on top of the "#" character to make it appear as if the character and the border line beneath it are ...

htmlcsscontenteditable