移动端做一个 loadiing 加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。

具体思路是 使用svg + css3 动画实现进度条的效果，代码如下：

1
2
3
4
<svg class="svg" xmlns="http://www.w3.org/200/svg" height="150" width="110">
    <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
    <circle class="progress_circle" id="J_progress_bar" cx="55" cy="55" r="50" fill="none" stroke-dasharray="" stroke="#4cc4fc" stroke-width="15"/>
</svg>

css 代码

1
2
3
4
.progress_circle{
    stroke-dasharray:1691,1691; // 进度 vs 周长
    -webkit-animation:strokeDasharray 3.5s linear;
  }

纯css3扫描效果～

1
2
3
border-top: 0.208rem solid #ececec;
-webkit-animation:scan 1.5s infinite linear;
background-image: linear-gradient(rgba(76,196,252,.8),rgba(0,0,0,0));

结束语：也可以用js 通过 stroke-dasharray 属性 控制 进度条，效果大致如下。