react实现网页加载动画
使用 CSS 动画实现加载动画
在 React 中可以通过 CSS 动画实现简单的加载效果。创建一个独立的 CSS 文件定义动画关键帧，然后在组件中应用。
CSS 动画示例：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}React 组件实现：
import './Loader.css';
function Loader() {
return <div className="loader"></div>;
}使用 React 动画库
react-transition-group 或 framer-motion 等库可以提供更复杂的动画效果。以 framer-motion 为例：
安装依赖：
npm install framer-motion组件实现：
import { motion } from "framer-motion";
function Loader() {
return (
<motion.div
animate={{
rotate: 360,
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "linear"
}}
style={{
width: 40,
height: 40,
background: "linear-gradient(to right, #3498db, #f3f3f3)",
borderRadius: "50%"
}}
/>
);
}条件渲染加载动画
实际应用中通常需要根据加载状态显示/隐藏动画：
function App() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 3000);
return () => clearTimeout(timer);
}, []);
return (
<div>
{isLoading ? <Loader /> : <MainContent />}
</div>
);
}SVG 动画实现
使用 SVG 可以创建更复杂的加载动画：
function SvgLoader() {
return (
<svg width="40" height="40" viewBox="0 0 40 40">
<circle
cx="20"
cy="20"
r="18"
stroke="#3498db"
strokeWidth="4"
fill="none"
strokeDasharray="80 20"
>
<animateTransform
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
</svg>
);
}第三方组件库解决方案
使用现成的 UI 组件库可以快速集成加载动画：
Material-UI 示例：
import CircularProgress from '@mui/material/CircularProgress';
function MuiLoader() {
return <CircularProgress />;
}Ant Design 示例：
import { Spin } from 'antd';
function AntLoader() {
return <Spin />;
}
