React工具箱-仅圆形ProgressBar在加载JSON时设置旋转动画

import React, { useState, useEffect } from 'react';
import './ProgressBar.css';

const CircularProgress = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟加载JSON数据
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <div>
      {loading ? (
        <div className="progress-container">
          <div className="progress-bar"></div>
        </div>
      ) : (
        <div>数据加载完成</div>
      )}
    </div>
  );
};

export default CircularProgress;

.progress-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #eee;
  position: relative;
}

.progress-bar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-top: 5px solid #007bff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}