最近用react做一個項(xiàng)目的后臺管理系統(tǒng)，但是測試服務(wù)器。。。真是不想吐槽了，卡得讓我懷疑人生，所以決定加個覆蓋全頁的loading效果，類似antd表格的loading。

先上大概效果圖：

效果圖

接下來就上代碼了。。。

目錄結(jié)構(gòu)

1. index.js:

import React from 'react';
import { Icon } from 'antd';
import styles from './index.less';

export default function () {
  return(
    <div className={styles.loading__box}>
      <Icon type="redo" className={styles.loading__icon} />
    </div>
  )
}

2. index.less:

.loading__box{
  //width: 100%;
  //height: 100%;
  //position: absolute;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background: rgba(255,255,255,0.8);
  .loading__icon{
    font-size: 80px;
    margin: auto;
    animation-name: loading;
    animation-duration: 2s;
    animation-iteration-count: infinite; // infinite 無限循環(huán)
  }
  @keyframes loading{
    form{
      transform: rotate(0turn);
    }
    to{
      transform: rotate(1turn);
    }
  }
}

然而。。。偶然發(fā)現(xiàn)了一個antd里面被我一直忽視的組件：Span加載中組件，完美地替代了我寫的辣雞組件。相關(guān)內(nèi)容請看：https://ant.design/components/spin-cn/