CSS如何制作加载中的圆圈动画？通过border-conic-gradient圆锥渐变-css教程-PHP中文网

不能。CSS中没有border-conic-gradient属性；conic-gradient()仅支持background等图像值属性，无法直接作用于border；实现加载圆圈推荐使用border+transform旋转方案，兼容性最佳。

css如何制作加载中的圆圈动画？通过border-conic-gradient圆锥渐变

border-conic-gradient 能直接做加载圆圈吗？

不能。border-conic-gradient 并不存在 —— CSS 没有这个属性。你可能混淆了 conic-gradient()（一个渐变函数）和 border（一个边框属性）。conic-gradient() 只能用在 background 或 mask 等支持图像值的属性上，无法直接作用于 border。

用 conic-gradient() 实现环形加载动画的关键思路

核心是：用一个正方形元素 + border-radius: 50% 做圆，再用 background 配合 conic-gradient() 绘制扇形，最后通过 background-clip: text 或遮罩/裁剪露出“缺口”，配合 animation 旋转实现动态效果。但更可靠、兼容性更好的方式是：

用 border 自身画圆（border: 4px solid #eee + border-top-color: #3b82f6），再 animation: spin 1s linear infinite
若坚持用 conic-gradient()，需配合 mask 或 clip-path 控制可见区域，否则会显示完整色盘而非“进度弧”
Chrome 119+ 支持 conic-gradient() 在 background 中配合 background-size 和 background-position 实现旋转弧，但 Safari 目前不支持 conic-gradient() 的动画重绘（会闪烁或卡顿）

推荐方案：纯 border + transform 动画（兼容性最好）

这是最稳定、零兼容性风险的做法，所有现代浏览器包括 iOS Safari 都支持：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

注意点：

CSS工具箱(专业版)

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

下载

必须设置 border-radius: 50%，否则是方框旋转
border-top-color 单独设色，其他三边为浅灰，才能形成“单色弧”视觉
不要用 rotateZ()，直接写 rotate() 更简洁且语义明确
避免在父容器上同时设 transform，否则可能触发层叠上下文导致旋转中心偏移

如果非要用 conic-gradient()：得加 mask 配合

仅当需要多色弧、渐变起止角可控、或与设计系统强绑定时才考虑。示例（Chrome/Edge 可用，Safari 慎用）：

.loader-conic {
  width: 40px;
  height: 40px;
  background: conic-gradient(from 0deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 50%;
  -webkit-mask: radial-gradient(white, white), 
                radial-gradient(farthest-side, transparent 99%, black 100%);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-conic 2s linear infinite;
}

@keyframes rotate-conic {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这里容易出错的地方：

mask 的两层径向渐变缺一不可：第一层白底显内容，第二层黑边挖空中心，形成环形
mask-composite: exclude 是关键，旧写法 -webkit-mask-composite: xor 已废弃，但 Safari 仍需前缀
动画中 conic-gradient() 本身不重绘，全靠 transform 旋转整个元素，所以实际是“带渐变的圆在转”，不是“渐变在动”

真要精细控制加载弧度（比如 30% 进度），conic-gradient() 方案反而更麻烦，此时该换 SVG + stroke-dasharray。