react项目中自写一个非常简单的loading效果

最近用react做一个项目的后台管理系统，但是测试服务器。。。真是不想吐槽了，卡得让我怀疑人生，所以决定加个覆盖全页的loading效果，类似antd表格的loading。

先上大概效果图：

效果图

接下来就上代码了。。。

目录结构

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 无限循环
  }
  @keyframes loading{
    form{
      transform: rotate(0turn);
    }
    to{
      transform: rotate(1turn);
    }
  }
}

然而。。。偶然发现了一个antd里面被我一直忽视的组件：Span加载中组件，完美地替代了我写的辣鸡组件。相关内容请看：https://ant.design/components/spin-cn/