Source:  Twitter logo

Stack: Meteor + React + MUI

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

// Sorry for not giving material-UI CSS,
// cause it cannot be served as 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 Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :

In the document of MUI 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

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>
29 users liked answer #0dislike answer #029
Kevin Crain profile pic
Kevin Crain

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>
    ...
13 users liked answer #1dislike answer #113
realbug profile pic
realbug

In MUI 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

6 users liked answer #2dislike answer #26
NearHuscarl profile pic
NearHuscarl

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]
3 users liked answer #3dislike answer #33
Soma sundara profile pic
Soma sundara

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>
0 users liked answer #4dislike answer #40
mohit uprim profile pic
mohit uprim

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).