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%);}}
}