React页面使用ant design Spin加载遮罩指示符自定义成进度条的形式 - 教程

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 = (
);
return (
……
);
};
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%);
}
}
}