loading实现的效果有很多，一般情况下都用gif直接使用，但在手机上实现loading的效果，一般也会用到div+css3，最近了解到svg也能用简单的实现，下面和大家分享下如何用svg实现loading进度效果；
工具/原料
1
svg
2
css3
方法/步骤
1
先来看下整体的效果——就是圆环状loading的效果；
2
首先我们需要创建两个圆。两个圆分别用不同颜色填充，第二个圆需要做特殊处理，需要用到stroke-dasharray 属性，这个是什么鬼？它就是圆的虚线~stroke-dasharray属性第一个值为虚线宽度，第二个为虚线间距
3
这里我们实现的原理就是将虚线间距设置成比圆周周长还大；间距大于2*pi*r，这里就是628；
4
当然你会发现loading的起始位置怎么不是顶部呢？它默认是在右侧的，所以这个我们可以自己设置，利用css3的 transform: rotate(-90deg);transform-origin: center center; 即可~
5
加上我们的js代码，让loading动起来~，利用setTimeout时间间隔每秒钟设置新的虚线宽度~即可；
6
运行的时候你会发现loading并不是很流畅，这时我们可以加上css3属性，针对stroke-dasharray加个动画持续时间；好了，整个loading就完成了，希望对童靴有所帮助；
注意事项
暂没在各型号手机上测试过，需要用到svg的load可以自行测试下~。
上一篇：宝宝餐冰糖炖雪梨的做法
下一篇：魅蓝e3怎么隐藏小圆点