最近用react做一个项目的后台管理系统，但是测试服务器。。。真是不想吐槽了，卡得让我怀疑人生，所以决定加个覆盖全页的loading效果，类似antd表格的loading。
先上大概效果图：
效果图
接下来就上代码了。。。
目录结构：
目录结构
- 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>
)
}
- 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/
