A, components,

import React from 'react'; import ReactDOM from 'react-dom' import stylus from './stylus.styl'; import classNames from "classnames/bind"; const ctx = classNames.bind(stylus); const LoadingNode = (props) => { const {content} = props; return ( <div className={ctx('loading-mask-box-npsp')}> <div className={ctx('loading-la-dl')}> <div className={ctx('loading-cir-la')}></div> <div className={ctx('loading-cir-la-content')}>{content ? </div> </div>)} class Loading extends React.Component {constructor(props) {super(props); let element = document.createElement('div') element.id = 'other-root'; this.state = { element, } } open = (data) => { const {element} = this.state; document.body.appendChild(element); ReactDOM.render( <LoadingNode content={data.content} />, element); } close = () => { const {element} = this.state; element.remove() } } const loading = new Loading(); export default loading;Copy the code

Second, the CSS

.loading-mask-box-npsp display flex align-items center justify-content center position fixed top 0 left 0 width 100vw height 100vh background rgba(121, 128, 121, Loading -la-dl display flex flex-direction column align-items center justify-content center .loading-cir-la width 4rem height 4rem border 3px solid #fff border-radius 50% border-top-color #b1111f animation roateloading .6s infinite linear & > .loading-cir-la-content font-size 2rem font-weight 400 color #fff @keyframes roateloading{ from{ transform rotate(0); } to{ transform rotate(300deg); }}Copy the code

Import loading from “.. /.. /components/loading”;

loading.open({ content:'loading' }); setTimeout(function () { loading.close(); }, 3000).Copy the code