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

每一天，每一步2025-08-28 15:30

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

javascript 复制代码

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 = (
    <Progress
      percent={loadingProgress}
      showInfo={false}
      strokeColor={{
        '0%': '#108ee9',
        '100%': '#87d068',
      }}
      strokeWidth={8}
      trailColor="#f5f5f5"
    />
  );

  return (
    <Spin
      spinning= { globalLoading }
      tip = "数据加载中，请稍候..."
      delay = { 100}
      indicator = { customIndicator }
      wrapperClassName = { styles.spinWrapper }
    >
      <div>......</div>
    </Spin>
  );
};

export default App;

css样式：

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