css实现loading圆环

2018-11-15 本文已影响92人回调的幸福时光

一、实现思路

戳我获取完整源码 😁

圆弧png

css部分

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

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的偏移量

r * 2 * Math.PI

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

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

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

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

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

3点方向

不推荐理由：

注意：
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);
    }
 }