2024-06-26 19:27:06 +08:00
|
|
|
|
import React from 'react';
|
|
|
|
|
|
import './refresh.css'; // 引入CSS样式
|
|
|
|
|
|
|
|
|
|
|
|
function Refresh(){
|
|
|
|
|
|
return(
|
|
|
|
|
|
<div className="refresh-container">
|
|
|
|
|
|
{/* 使用SVG创建一个圆形的加载动画 viewBox定义了 SVG 的坐标系统和缩放行为*/}
|
|
|
|
|
|
<svg className="refresh-circular" viewBox="25 25 50 50">
|
|
|
|
|
|
{/* circle元素定义了一个圆形路径，用于加载动画
|
|
|
|
|
|
cx和cy属性定义了圆心的位置
|
|
|
|
|
|
r属性定义了圆的半径
|
|
|
|
|
|
fill="none"表示圆形不填充颜色
|
|
|
|
|
|
strokeWidth="4"定义了圆形路径的宽度 */}
|
|
|
|
|
|
<circle className="refresh-path" cx="50" cy="50" r="20" fill="none" strokeWidth="6" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default Refresh;
|
