CSS如何制作加载时的环形进度条动画_通过stroke-dasharray实现-css教程-PHP中文网

stroke-dasharray通过设定圆周长与0的数组控制环形进度条描边截取，配合stroke-dashoffset负向偏移实现动画；需预计算周长（如r=45时取283），避免CSS动态计算、错误补全及起始方向偏差。

css如何制作加载时的环形进度条动画_通过stroke-dasharray实现

环形进度条本质是 SVG 的描边被“截取”了一段，靠 stroke-dasharray 和 stroke-dashoffset 配合动画实现。不是靠旋转、也不是靠遮罩——这点容易搞错。

关键点在于：圆周长必须预先算准，否则进度会不准。用 2 * Math.PI * r 算出周长后，设为 stroke-dasharray 的第一个值（比如 100），第二个值设为 0；再用 stroke-dashoffset 从 100 往 0 变，视觉上就是“画完一圈”。

r = 45 时，周长 ≈ 282.74，建议四舍五入到 283，别用 Math.round(2 * Math.PI * r) 动态算——CSS 里不支持 JS 表达式
如果直接写 stroke-dasharray="100"，浏览器会自动补成 "100, 100"，导致虚线效果，进度跳变
stroke-dashoffset 是负向偏移：值越大，露出越少；所以动画要从大数往小数变（如 283 → 0）

用 @keyframes 控制 stroke-dashoffset 本身没问题，但常见错误是没配 transform: rotate(-90deg)，导致进度从 3 点钟方向开始，而不是顶部（12 点钟）。

必须加 transform: rotate(-90deg)，让起始点对齐顶部；否则用户直觉是“从上往下走”，实际却是“从右往左绕”
动画时长设为 1s 不代表 1 秒走完 100%，它只是整个 keyframes 的执行时间；真正进度由 JS 控制 stroke-dashoffset 的内联值，CSS 动画只负责过渡
别在上写 transition: stroke-dashoffset 0.3s ease —— 这会导致初始加载时闪一下（从默认 0 突然跳到目标值），应该用 transition: stroke-dashoffset 0.3s ease 0.1s 加个延迟起步

每次调用 element.style.strokeDashoffset = value 都会触发重排，高频更新（比如每 50ms）容易掉帧。尤其在低性能设备上，requestAnimationFrame 比 setTimeout 更稳。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

不要用 setInterval 去模拟进度增长；改用 requestAnimationFrame + 时间戳计算当前百分比，更平滑
stroke-dashoffset 必须是数字，单位不能带 px 或 em；传字符串如 "200" 也能工作，但建议统一用 Number 类型
如果进度从 0→100% 后还要复位重播，记得先设 stroke-dashoffset="283" 再开动画，否则会残留上一次的结束状态