css实现loading圆环
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css实现loading圆环相关的知识，希望对你有一定的参考价值。
参考技术A戳我获取 完整源码 😁
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属性
以上是关于css实现loading圆环的主要内容，如果未能解决你的问题，请参考以下文章
react 实现 loading 动效圈，支持配置转一圈的 duration