使用SVG实现圆环loading进度效果

效果

当我们想实现这样一个loading效果，有这么几种选择，第一种是使用canvas，第二种是借助css3的transform属性。这两种方法有一个问题，在webkit内核的浏览器上存在毛边。那么如果只兼容IE9+的浏览器，可以考虑使用SVG

具体代码

SVG的实现效果非常简单

<svg width="440" height="440" VIEWBOX="0 0 440 440"> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle> </svg>

实现这个效果的关键因素在于stroke-dasharray="0 1069" 第一个参数代表蓝色进度条的长度，第二个参数代表灰色背景的长度。这里两个参数的和必须是1069，也就是圆的周长

如果我们想拖动下面的进度条自动更新进度，只需要通过js改变这个属性值就可以。js代码如下所示

if(window.addEvenetListener){ var range = document.getElementById('range'); if(!range) return; //获得第二个圆的引用 var circle = range.getElementsByTagName('circle')[1]; range.addEvenetListener('change', function(){ var percent = this.value / 100; //圆的周长 var perimeter = Math.PI * 2 * 170; //stroke-dasharray属性的两个参数和必须为周长 circle.setAttribute('stroke-dasharray', perimeter * percent + ' ' + perimeter. * (1 - percent)); }) }

css代码如下所示

circle { -webkit-transition: stroke-dasharray .25s; transition: stroke-dasharray .25s; }

stroke-dasharray在SVG中描边是代表虚线，第一个参数是虚线的宽度，第二个参数是虚线之间的间距。默认stroke-dasharray的起始位置在右侧，而不是上方，因此，我们需要使用transform逆时针旋转90°, 这就是第二个circle元素上面transform=”matrix(0,-1,1,0,0,440)”的由来。(iOS 手机上，transform逆时针旋转90°只会改变图形外观，但是其坐标起始位置还是右侧。因此，更改起始坐标可能还需要通过外部容器旋转控制。)