优雅地使用loading(推荐)

<div class="container">
 <div class="loading"></div>
</div>
.container {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

.loading {
 width: 100px;
 height: 100px;
 border-radius: 100%;
 border: 5px #ffffff solid;
 border-right-color: #87CEEB;
 animation: loading 1s linear infinite;
}

@keyframes loading {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
}

<script>
 export default {
 name: "loading",
 data() {
  return {
  show: false
  }
 }
 }
</script>

//先引入loading组件
import LoadingComponent from './loading'
const Loading = {}
Loading.install = function (Vue) {
// 生成一个Vue的子类 同时这个子类也就是组件
const ToastConstructor = Vue.extend(LoadingComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor()
// 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
//注入vue的原型链
Vue.prototype.$loading = {
 show() {
  instance.show = true
 },
 close(){ 
  instance.show = false
  }
 }
}
export default Loading

<script>
 export default {
 name: 'HelloWorld',
 data() {
  return {
  msg: ''
  }
 },
 mounted() {
  this.$loading.show()
  setTimeout(()=>{
  this.$loading.close()
  this.msg = '加载完辽！'
  },3000)
 }
 }
</script>

import React from 'react';
import './index.css'

function hoc(ComponentClass) {
 return class HOC extends ComponentClass {
  render() {
   if (!this.state.loading) {
    console.log(this.state.loading)
    return super.render()
   }
   else {
    return (<div>
     <div className="container">
      <div className="loading"></div>
     </div>
    </div>)
   }
  }
 }
}

export default hoc

import hoc from '../hoc/loading/index'

class Home extends Component {
 constructor(props) {
  super(props)
  this.state = {
   msg: '还没加载好',
   loading: true
  }
 }

 render() {
  return (
   <div>
    {this.state.msg}
   </div>
  );
 }

 componentDidMount() {
  let loading = this.state.loading
  setTimeout(() => {
   this.setState({
    loading: !loading,
    msg: '加载完辽!'
   })
  }, 3000)
 }
}

export default hoc(Home)