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

  1. 设置描边为虚线

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

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

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

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

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属性

推荐阅读更多精彩内容