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

即将拥有人鱼线的Iverson

已于 2022-07-04 10:54:49 修改

阅读量5.3k

点赞数

分类专栏： # React 文章标签： react

于 2021-04-30 11:30:08 首次发布

本文链接：https://blog.csdn.net/Iversons/article/details/116297842

版权

本文介绍了在Ant Design Pro v5.0框架中如何全局替换默认的Spin加载动画。通过在src/components创建PageLoading组件，包含index.tsx和index.less文件，然后在app.tsx入口文件中设置全局默认的Spin元素为PageLoading，实现了定制化的页面加载效果。

摘要由CSDN通过智能技术生成

前言：最新的项目用的是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}>