css实现loading圆环

一、实现思路

• 四分之一圆弧
• 旋转动画

戳我获取完整源码 😁

圆弧png

二、画四分之一圆弧

2.1 border方案

css部分

width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid transparent;
border-top-color: #FF6666;

2.2 svg方案

css部分

fill: none;
stroke: #FF6666;
stroke-width: 5px;
stroke-dasharray: 100,214;
stroke-dashoffset: 130;

html部分

  <svg width="200" height="200">
    <circle id="svg-circle" class="spinner" cx="100" cy="100" r="50"></circle>
  </svg>

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

1. 获取圆的周长

r * 2 * Math.PI

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

2. 设置描边为虚线

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

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

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

3. 设置描边起始点的偏移量

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

3点方向

2.3 canvas方案

不推荐理由：

• canvas在高倍屏会模糊
• 主要通过js实现，调试不便。

三、旋转动画

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

transform-origin: 50% 50%;

引用动画

animation: loading .8s linear infinite;

旋转动画

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

参考

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