在微调器/加载器运行时禁用后台

Question

我使用了React-spinners，但是当加载程序工作时，后台的问题没有被禁用。

我试图通过css来实现这一点，所以我补充道：

.parentDisable{
    position: fixed;
    top: 0;
    left: 0;
    background: #666;
    opacity: 0.8;
    z-index: 998;
    height: 100%;
    width: 100%;
}

并在我的加载程序中使用它：

.centered {
  position: absolute; /* or fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

import { css } from '@emotion/core';

const override = css`
    display: block;
    margin: 0 auto;
    border-color: red;
`;

<div className='sweet-loading centered parentDisable'>
    <PropagateLoader
        css={override}
        sizeUnit={"px"}
        size={25}
        // color={'#123abc'}
        color={'#0062ff'}
        loading={this.state.loading}
    />
</div>

但我面临着一些问题：

1)微调器不再对齐到中心...它在左上角

2)微调器停止后，叠加背景仍保留在屏幕上

我通过这样做解决了第二个问题：

 <div /*className='sweet-loading centered parentDisable'*/ className={this.state.loading ? 'parentDisable' : ''}>

Answer 1

我的解决方案是以防有人需要它：

 <div className={this.state.loading ? 'parentDisable' : ''} width="100%">
                        <div className='overlay-box'>
                            <PropagateLoader
                                // css={override}
                                sizeUnit={"px"}
                                size={25}
                                color={'white'}
                                loading={this.state.loading}
                            />
                        </div>
                    </div>

CSS#

.parentDisable{
  position: fixed;
  top: 0;
  left: 0;
  background: #666;
  opacity: 0.8;
  z-index: 998;
  height: 100%;
  width: 100%;
}

.overlay-box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color: white; background: #666666; opacity: .8;
  z-index: 1000;
}