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 ? content : '正在刷新'}</div>
</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;
二、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, 0.71)
& > .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);
transform rotate(300deg);
三、使用import loading from "../../components/loading";
loading.open({
content:'loading'
setTimeout(function () {
loading.close();
},3000)
