React页面使用ant design Spin加载遮罩指示符自定义成进度条的形式具体实现：

import React, { useState, useEffect, } from 'react';
import { Spin, Progress, } from 'antd';
import styles from './style.less';const App = () => {// 全局加载状态const [globalLoading, setgGlobalLoading] = useState(false);// 进度条状态const [loadingProgress, setLoadingProgress] = useState(0);useEffect(() => {// API调用开始setgGlobalLoading(true);// 执行过程// API调用结束setgGlobalLoading(false);}, [])useEffect(() => {let timer;let progressInterval;if (globalLoading) {// 立即设置进度为 0，避免延迟显示时的跳跃setLoadingProgress(0);// 延迟显示进度条timer = setTimeout(() => {// 开始进度条动画progressInterval = setInterval(() => {setLoadingProgress(prev => {// 非线性增长，模拟真实加载const increment = Math.random() * 10;const newProgress = prev + increment;// 当接近完成时，放缓增长速度if (newProgress >= 95) {return 95; // 保持在 95%，等待实际加载完成}return newProgress;});}, 200); // 每 200ms 更新一次}, 100); // 延迟 100ms 后开始动画} else {// 加载完成时，快速填充到 100%setLoadingProgress(100);// 500ms 后隐藏进度条const completeTimer = setTimeout(() => {setLoadingProgress(0);}, 500);return () => clearTimeout(completeTimer);}return () => {clearTimeout(timer);clearInterval(progressInterval);};}, [globalLoading]);const customIndicator = (<Progresspercent={loadingProgress}showInfo={false}strokeColor={{'0%': '#108ee9','100%': '#87d068',}}strokeWidth={8}trailColor="#f5f5f5"/>);return (<Spinspinning= { globalLoading }tip = "数据加载中，请稍候..."delay = { 100}indicator = { customIndicator }wrapperClassName = { styles.spinWrapper }><div>……</div></Spin>);
};export default App;

css样式：

.spinWrapper {width: 100%;position: fixed;left: 0;right: 0;bottom: 0;z-index: 9999;display: flex;justify-content: center;align-items: center;:global {.ant-spin-container {width: 100%;}.ant-spin .ant-spin-text {font-size: 20px !important;}.ant-progress {width: 550px;margin-bottom: 12px;}.ant-spin.ant-spin-show-text .ant-spin-dot {transform: translateX(-48%);}}
}