安卓转圈loading_使用css实现android系统的loading加载动画

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

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

的.

xml(svg)

首先我们定义svg的画布尺寸为 50x50 , 在浏览器中缩放为 36x36 显示(这个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