1 <svg width="440" height="440" viewbox="0 0 440 440"> 2 <circle cx="220" cy="220" r="220" fill="#ddd"></circle> 3 <circle cx="220" cy="220" r="110" stroke-width="220" stroke="#00A5E0" transform="matrix(0,-1,1,0,0,440)" fill="#ddd"> 4 5 </circle> 6 </svg>
记住如下几点：
1.第一个circle是总面积区域，第二个circle 是已加载的面积区域
2.第二个circle 的半径r 是第一个circle的二分之一，切第二个circle的线条宽度等于第一个circle的半径。
3.两个circle的fill填充颜色要相同
4.第二个circle的线条颜色 表示已加载的区域的颜色。
5.利用事件监听加载进度，修改第二个circle的stroke-dasharray属性，则可以看到一个饼状图慢慢变圆形的动画效果。stroke-dasharray的第第一个参数和二个参数的和 保持不变，为整个圆的面积。
6.事件监听效果，请参考这位大神的demo。
http://www.zhangxinxu.com/study/201507/svg-circle-loading.html