加载动画生成器

如何使用

1. 选类型：圆环 spinner、弹跳圆点、进度条、脉冲圈或骨架屏微光。
2. 拖大小缩放动画。进度条用它设定轨道宽度，骨架屏用它设定色块高度。
3. 设周期时长（秒）。数值小显得急，1.5 秒左右显得从容。
4. 选主色给运动部分、轨道色给静止部分。骨架屏用这两种颜色作为微光渐变的两端。
5. 复制 CSS 与那一小段 HTML，一起粘进页面即可。演示框跑的就是同一份代码。

常见用途

• 按钮与表单等待态 —— 提交请求时在按钮里放一个小圆环。
• 内容占位 —— 用骨架屏摆出即将加载的卡片形状。
• 路由切换反馈 —— 抓取下一页时在页头下放一条通宽进度条。
• 上传与处理页 —— 圆点或脉冲圈让等待中的页面不像卡死。

为何保证隐私

动画是页面内拼装的纯 CSS keyframes，演示通过作用域样式元素运行同一份 CSS。没有上传，也没有脚本在服务端运行。

常见问题

问：为什么有些类型禁用粗细滑块？ 答：只有圆环 spinner 与进度条存在一个粗细独立于整体尺寸的部件。圆点、脉冲圈与骨架屏的所有尺寸都由大小值推导，粗细对它们不起作用。

问：这些动画会尊重系统的减弱动效设置吗？ 答：生成的 CSS 无条件播放。为无障碍起见，可把动画规则包进 @media (prefers-reduced-motion: reduce)，给要求减少动效的用户换成静态或更慢的退而求其次方案。

问：等待时间未知时用哪个？ 答：用不确定型：圆环、圆点、进度条、脉冲圈。它们无限循环，不会给用户一个假的百分比。能量化的等待才用确定进度。

问：骨架屏能改配色吗？ 答：能。轨道色与主色就是微光渐变的两端。想要细腻效果就选同一表面色的两个相近色调，想更醒目就选对比强的一对。