526互联

react 使用 antd 创建全局loading

发布时间 2023-12-01 16:01:06作者: ZerlinM

代码如下：

import ReactDOM from 'react-dom';
import { Spin } from 'antd';

export const showGlobalLoading = () => {
    const dom = document.createElement('div')
    dom.id = 'globalLoading'
    dom.style = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.45); display: flex; justify-content: center; align-items: center; z-index: 2;';
    document.body.appendChild(dom)
    ReactDOM.render(<Spin fullscreen />, dom)
}

export const hideGlobalLoading = () => {
    const dom = document.getElementById('globalLoading')
    if (dom) {
        document.body.removeChild(dom)
    }
}

使用：
显示 showGlobalLoading(); 隐藏 hideGlobalLoading();