CODEWITHSUNDEEP
cssreactjsmaterial-ui
Junho Kim
Junho Kim

Reputation: 287

Material UI Progress Indicator center align horizontally

Stack: Meteor + React + Material UI

Here's the full code of my 'main' renderer components:

// Sorry for not giving material-UI CSS,
// cause it cannot be served as a stand-alone CSS

render() {
    return ( 
      <div className = "container">
        <AppBar title = "test" />
        <Tabs /> // Tab contents goes here
        <RefreshIndicator
          left={70} // Required properties
          top={0}  // Required properties
          status="loading"
          style={{ 
              display: 'inline-block',
              position: 'relative',
              margin: '0 auto' }} />
      </div>
   );
},

I want to make the Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :

enter image description here

In the document of Material UI here, this indicator comes with following styles:

display: 'inline-block',
position: 'relative',

With this styles I cant align it center horizontally, and without this styles, I can`t even locate it where I wanted.

What I have tried :

  1. margin: 0 auto --> failed
  2. text-align: center --> failed
  3. display: flex --> failed
  4. combination of 1 & 2 --> failed
  5. left={$(window).width/2-20} --> This works but I'd like to use CSS only

Upvotes: 25

Views: 49786

Answers (5)

NearHuscarl
NearHuscarl

Reputation: 81350

In Material UI v5, there is a Stack component which serves as a flexbox container. By default the direction is column, to center it horizontally you can set alignItems to center:

<Stack alignItems="center">
  <CircularProgress />
</Stack>

Live Demo

Codesandbox Demo

Upvotes: 14

mohit uprim
mohit uprim

Reputation: 5334

The Backdrop Component will place the progress indicator in the center and also can add a dimmed layer over your application. This component is available with MUI V5.

<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>

Upvotes: 2

Soma sundara
Soma sundara

Reputation: 167

circularprocess in material ui and text middle of page stackoverflow

 <div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
                                <CircularProgress />
                                <span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
                            </div>[![enter image description here][1]][1]

Upvotes: 2

Kevin Crain
Kevin Crain

Reputation: 1935

The solution below centres progress indicator without any hacky calculations that cause element to be offset:

<div style={{display: 'flex', justifyContent: 'center'}}>
   <RefreshIndicator status="loading" />
</div>

Upvotes: 36

realbug
realbug

Reputation: 448

Here is how I did to ensure it's horizontally centered. Works great for me.

  1. Set the parent component style to position: 'relative'.
  2. Set the refresh indicator style to marginLeft: '50%', and left={-20} (assuming the size is 40).

here is the code (I put it in a CardText component).

    ...
    <CardText style={{position: 'relative'}}>
      <RefreshIndicator
        size={40}
        left={-20}
        top={10}
        status={'loading'}
        style={{marginLeft: '50%'}}
      />
    </CardText>
    ...

Upvotes: 15

Related Questions