web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".

注意 : gif帧数少的原因, 实际动画效果是很 平滑

的.

xml(svg)

首先我们定义svg的画布尺寸为 50×50 , 在浏览器中缩放为 36×36 显示(这个36你可以根据实际需要调整), 定义环的圆心坐标为 25,25 , 半径为20 (算下 周长大概为125 , 后面会用到), 颜色为 currentColor 获取父元素的color属性的值, 环的宽度为5像素, 看下在没写css前的效果:

scss

.a-loading {

&-android {

animation: rotate 2s linear infinite;

transform-origin: center center;

>circle {

display: inline-block;

animation: dash 1500ms ease-in-out infinite;

stroke-linecap: round; // 端点是圆形

color: currentColor;

}

@keyframes rotate {

100% {

transform: rotate(360deg);

}

}

@keyframes dash {

0% {

stroke-dasharray: 1, 200;

}

50% {

stroke-dasharray: 100, 200;

stroke-dashoffset: -45;

}

100% {

stroke-dasharray: 100, 200;

stroke-dashoffset: -124;

}

}

}

}

stroke-dasharray

先解释stroke-dasharray , 他是用来定义虚线的, 比如 stroke-dasharray="50, 20" 表示实线部分为50, 间隙20的虚线:

试想一下, 如果环也用虚线表示, 并且让 单位实线 部分的长度在环的周长范围内变化,这不就实现了(半环/满环等形态), 下面分别是stroke-dasharray 的值为 25, 200 /