XLoading — 加载动画

多种纯 CSS / SVG 加载动画，零三方依赖。支持尺寸、颜色、速度与文案自定义。

实时演示

circle

gear

<XLoading text="circle" />
<XLoading type="leap" color="#409eff" />
<XLoading type="orbit" color="#ef4444" />
<XLoading type="gear" color="#722ed1" size="56" text="gear" />

Props

属性	类型	默认值	说明
type	string	'circle'	动画样式：circle/leap/bar/boxes/typewriter/orbit/gear/dots/...
size	number	40	尺寸（px）
color	string	''	动画颜色；不传取主题强调色
speed	number	1.4	动画速度（如 SVG orbit 的持续秒数）
text	string	''	下方文案

样式一览

• circle：8 点环形涟漪（默认）。
• leap：三球跳蛙。
• bar：矩形进度条。
• boxes：3D 等距方块。
• typewriter：打字机。
• orbit：小球沿 ∞ 轨迹循环滚动（速度由 speed 控制）。
• gear：多齿轮啮合旋转。
• dots：三点弹跳。