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:

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

I'm attempting to insert a line break after HTML elements that are being added from JavaScript code inside a `display: flex` div

I'm facing an issue where line breaks are not added after HTML elements are inserted via JavaScript upon clicking a button. For instance, the data from the inputs doesn't get separated even when I click submit multiple times: To illustrate, her ...

javascripthtmlcss

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating

As part of my Angular project, I am currently focusing on writing unit test cases using the Jasmine Framework and Karma. To ensure thorough testing coverage, I am utilizing Coverage-html (Istanbul). When it comes to coverage, there are several important t ...

javascriptangularjsjasminekarma-jasmineistanbul

What a great method to execute a button click within the same button click using jQuery!

Here's an example of code that attempts to make an ajax call when a user clicks a button. If the ajax call fails, the button should be reclicked. I've tried this code below, but it doesn't seem to work. $("#click_me").click(function(){ ...

javascriptjqueryajax

Expanding the size of an array list item in React

I have an array containing various currencies: const currencies =['USD','EUR','AUD','CNY','AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'A ...

javascriptarraysreactjs

The local ESlint plugin is causing issues with installing dependencies on our CI environment

I have developed a personalized ESLint plugin specifically for one project and have not made it public. It is saved in a folder within my project because I only intend to use it internally, and I see no need to create a separate repository for it. However, ...

javascriptnpmeslinteslintrc

Is there a way to locate child components without needing to designate the higher-order component encompassing them?

When working with Material-ui, I often find that its extensible nature can be a hindrance when it comes to testing. For example, even if I am using the following code: const MyEventButton = () => (<IconButton /> <Event /> </IconButton ...

javascriptreactjsunit-testingmaterial-uienzyme

Node.js refuses to launch - the dreaded error 404, signaling that it has mysteriously vanished

I am brand new to node.js, so please be patient with me as I learn. Currently, I am using the express framework and attempting to create a basic application that displays content as HTML. Below is the essentials of my app.js: var express = require(' ...

javascriptnode.jsexpress

[VUE Alert]: Rendering Error - "Sorry, there is a type error: object is currently undefined."

<script> const app = new Vue({ el: '#app', data:{ results:{} }, mounted() { axios.get('{{ route('request.data') }}').th ...

javascriptvue.jsvuejs2

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

IE displaying "slow script" alert due to Knockout malfunction

Within my grid of observables and computed observables, the first row serves as a multiplier for all subsequent rows. Users can modify this percentage rate and Knockout automatically updates all relevant values accordingly. Additionally, I require a textbo ...

javascriptinternet-explorerknockout.js

When implementing the useReducer hook with context API in Next.js, the useContext function may return undefined in certain cases

I've encountered an issue while using the Context API with the useReducer hook in my Next.js app. When calling useContext with the contextProvider, it returns undefined. Below is the code snippet that I'm working with: import React, { createCon ...

reactjsnext.jsreact-context

Is there a way to display or conceal the number input field based on the selection of a specific radio button?

Is there a way to set it up so that when the radio button for PayPal is selected, a number textfield will be displayed, and if not selected, it remains hidden? Additionally, can we have a message appear saying "COD is chosen for the payment option" when C ...

reactjsmaterial-ui

How to trigger an Angular JS route without loading a view

Could someone help me with calling the /auth/logout url to get redirected after a session is deleted? app.config(['$routeProvider',function($routeProvider) { $routeProvider .when('/auth/logout',{ controller:'AuthLo ...

javascriptangularjscontrollersroute-provider

Oops! Looks like we're having trouble finding the module react-redux/native

Encountering an error message while running my first react-native application with Redux on a device. The error message states, "UnableToResolveError: Unable to resolve module react-redux/native from C:\project\Testing\index.android.js: ...

reactjsreact-nativereact-redux

Load various types of classes and run functions with matching names

I have encountered a challenging issue that needs to be resolved. Imagine having multiple classes located in a directory named services. These classes all include a constructor() and send() method. Examples of such classes can be Discord, Slack, SMS, etc. ...

javascriptnode.js

Execute the function numerous times that is associated with an asynchronous function in JavaScript

I am currently working on two functions: one is asynchronous as it fetches data from a CSV file, and the other function renders a list of cities. The CSV file contains information about shops located in various cities. My goal is to display a list of cit ...

javascriptcsvasynchronousfetch

What is the best way to include and transmit multiple records in ASP.NET MVC with the help of jQuery?

Having trouble sending multiple records to the database using JavaScript in ASP.NET MVC? Look no further, as I have the best code that can send data to the controller. However, the file attachment is not being sent along with it. I've tried various m ...

javascriptc#jsonajaxasp.net-mvc

I could use some assistance with accessing the /results page on the OMDb API following a movie search by

Presented here is my app.js code. My objective is to develop a movie search feature that enables me to look up a movie in a database and retrieve results for 10 movies related to the entered keyword. For instance, if I input "ALABAMA", the system should re ...

javascriptnode.jsexpressaxiosomdbapi

The functionality of anchor links created through ajax is not operating correctly

Issue: I am encountering a problem where I have a table filled via Ajax, containing local anchors. When an anchor is clicked, it should make a section visible and automatically scroll to it. This functionality works when manually filling the table, but not ...

javascriptphpjqueryhtmlajax

Revise the reply within ExpressJS

I need help with editing the response to a request in Express. When the request is made via XHR, I want to encapsulate the body inside a JavaScript object. This way, different parts of the page can be accessed individually within the JavaScript object, suc ...

javascriptnode.jsexpressmiddleware