Ant Design Pro如何全局更换页面的Loading样式？

前言：最新的项目用的是Ant Design Pro v5.0的框架，每个页面的Loading默认用的是Spin组件，以前的项目也是默认用的Spin项目，在这个项目中看到后就有点审美疲劳了~~~，所以就想替换掉默认的加载动画，在网上也找了好多方法，有的是语言不对应，有的是版本不对应，有的虽然可以实现，但是要在每个请求时去做处理，就会比较麻烦，经过认真查阅官网API，在Spin组件的最后一句话中发现了实现的最优方案）：

官网地址

话不多数，直接上实现过程：

1、在项目的src/components文件下创建一个PageLoading的组件，PageLoading下分2个文件：index.tsx和index.less，一个用来写页面组成元素另一个来写页面样式

index.tsx文件代码如下：

import React from 'react';
import style from './index.less';

const PageLoading: React.FC = () => {

    return (
        <div className={style.page_loading_container}>
            {/* <加载动画 */}
            <div className={style.spinner_box}>
                <div className={style.configure_border_1}>
                    <div className={style.configure_core}></div>
                </div>
                <div className={style.configure_border_2}>
                    <div className={style.configure_core}></div>
                </div>
            </div>
        </div>
    );
};

export default PageLoading;

index.less文件代码如下：

/* 页面刷新 Loading 总容器 */
.page_loading_container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    height         : 100%;
    min-height     : 420px;
}

.configure_border_1 {
    width          : 50px;
    height         : 50px;
    padding        : 3px;
    position       : absolute;
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : #ffab91;
    animation      : configure-clockwise 3s ease-in-out 0s infinite alternate;
}

.configure_border_2 {
    width          : 50px;
    height         : 50px;
    padding        : 3px;
    left           : -50px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : rgb(63, 249, 220);
    transform      : rotate(45deg);
    animation      : configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

.configure_core {
    width           : 100%;
    height          : 100%;
    background-color: #37474f;
}

/* 动画 */
@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes configure-clockwise {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

@keyframes configure-xclockwise {
    0% {
        transform: rotate(45deg);
    }

    25% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(-135deg);
    }

    75% {
        transform: rotate(-215deg);
    }

    100% {
        transform: rotate(-305deg);
    }
}

@keyframes pulse {
    from {
        opacity  : 1;
        transform: scale(1);
    }

    to {
        opacity  : .25;
        transform: scale(.75);
    }
}

2、在项目的总入口文件（app.tsx）引入PageLoading文件并自定义全局默认 Spin 的元素为PageLoading即可

关键代码如下：

import { Spin, } from 'antd';
import PageLoading from '@/components/PageLoading';
//全局配置Loading
Spin.setDefaultIndicator(<PageLoading />);

3、刷新页面即可看到效果，如下图：

完结撒花~~~