任务路径 / 从输入到结果
如何设计 CSS 加载动画
- 01
选择加载器样式
打开“加载器样式”，选“轨道圆环”得到经典的旋转圆环，或选“三点”得到跳动的三点组合。实时预览会随你的每次修改立即动起来。
- 02
设置框架与描边尺寸
画布支持 24–160 px，描边或圆点支持 2–20 px。圆环描边必须小于画布的一半；三个圆点及至少 2 px 的间距必须放得下，否则禁用复制与下载。圆环导出尺寸包含边框。
- 03
调整速度与颜色
把“循环时长”选在 0.2 到 4 秒之间。“活动颜色”用于圆环上边框或中间圆点；“轨道颜色”用于圆环其余边框或两侧圆点。
- 04
或从示例开始
按“加载示例”应用一套醒目的三点预设——72 px 外框、12 px 圆点、0.75 s 周期的红黄配色——作为起点。“重置”随时回到默认的轨道圆环。
- 05
复制或下载 CSS
点“复制 CSS”把整段规则放进剪贴板，或点“下载 .css”保存 toolars-loader.css。输出自带 @keyframes，以及一段在 prefers-reduced-motion 下停止动画的媒体查询。
- 06
接入你的标记
轨道圆环只需要一个带 .loader 类的元素；三点样式需要它内部有三个 span 子元素。导出内容包含 prefers-reduced-motion 块，会为对动画敏感的访客停止动画。