Question

css实现loading圆环

Answer 1

戳我获取 完整源码 😁

css部分

css部分

html部分

stroke-dasharray： 创建dashes和设置dashes之间的间隔。
stroke-dashoffset： 定义dash的偏移量

即 50 * 2 * Math.PI = 314.1592653589793 约等于 314

虚线是由实线和实线之间的间隔形成的。

stroke-dasharray: 100,214; 代表 实线长度为100，实线之间的间隔为214。

因为圆的周长总共为314, 所有只会显示第一个实线和间隔。

circle的默认开始路径是在3点方向，通过 stroke-dashoffset: 130; 将圆弧顺时针移动到上方。

不推荐理由：

注意：
transform-origin默认是以元素中心为变形原点。
但是当采用svg坐标系的默认原点是左上角(0,0)处，如果直接引用动画，会发现svg围绕着左上角旋转，这不是我们想要的结果，所以需要重新设置旋转的中心点。

引用动画

旋转动画

大漠：理解SVG坐标系统和变换： transform属性
初窥 SVG Path 动画
css-tricks: stroke-dasharray
css-tricks: stroke-dashoffset
justforuse: SVG中stroke-dasharray及stroke-dashoffset属性