How to create material-ui dialog box with transparent background color and change its height?

Question

I\'m trying to create a loading status indicator using material ui. But I want the background color of dialogue box as none and also want to adjust the height. But

Answer 1

There is the component CircularProgress which you can use directly (instead of building a loding indicator by using Dialog: http://www.material-ui.com/#/components/circular-progress

You can place the loading indicator in a div which is placed in the middle of the page:

JSX:

<div className="my-spinner">
    <CircularProgress size={59.5} />
</div>

CSS:

.my-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-
}

Answer 2

You can set the overlayStyle prop on Dialog to change the background color, like so:

 <Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  overlayStyle={{backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
  >

Answer 3

In material v4 or latest. You can use BackdropProps, see the online demo

Answer 4

For the latest version ("@material-ui/core": "^1.2.3"), here is how it's done:

<Dialog
  {...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

Take note of the new PaperProps prop. It's not in the documentation but if you check out the source, they are using PaperProps as one of the props you can pass in - since this isn't in the docs, this might change with future versions though, so be careful here.

Answer 5

Directly you can use CircularProgress with css properties, zIndex and opacity, Try this:

<CircularProgress size={2} style={Styles.mainLoader}/>

mainLoader: { 
    position: 'absolute',
    paddingTop: '15%',      
    width: '100%',
    height: '100%',
    zIndex: 1000,
    backgroundColor: '#000000',
    opacity: 0.5,
    textAlign: 'center',
}

It will cover the entire screen with .5 opacity and specified background.

Answer 6

Use the bodyStyle props like so:

<Dialog
  bodyStyle={{margin:0, padding:0}}
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>