antd的加载状态怎么改为进度条

如果你想将 Ant Design 的加载状态改为进度条，可以使用 `Progress` 组件来实现。你可以在加载状态的时候，将 `Spin` 组件替换为 `Progress` 组件，并使用 `setInterval` 函数来模拟进度条的更新。

以下是一个示例代码：

import { useState, useEffect } from 'react';
import { Spin, Progress } from 'antd';

const MyComponent = () => {
  const [loading, setLoading] = useState(false);
  const [percent, setPercent] = useState(0);

  useEffect(() => {
    if (loading) {
      const interval = setInterval(() => {
        if (percent < 100) {
          setPercent(percent + 10);
        } else {
          clearInterval(interval);
          setLoading(false);
          setPercent(0);
        }
      }, 500);
      return () => clearInterval(interval);
    }
  }, [loading, percent]);

  const handleClick = () => {
    setLoading(true);
  };

  return (
    <>
      {loading ? (
        <Progress percent={percent} />
      ) : (
        <button onClick={handleClick}>加载</button>
      )}
    </>
  );
};

在上面的代码中，我们首先定义了 `loading` 和 `percent` 两个状态，分别表示加载状态和进度条的进度。在组件的 `useEffect` 钩子函数中，我们使用 `setInterval` 函数模拟进度条的更新，当进度条达到 100% 时，清除定时器并将加载状态和进度条进度重置。在组件中，我们根据 `loading` 状态来切换 `Spin` 和 `Progress` 组件的显示，当加载状态为 `true` 时，显示进度条组件，否则显示加载按钮。