小tip: 使用SVG寥寥数行实现圆环loading进度效果

标签： SVG相关 loading stroke-dasharray SVG 圆形 | 发表时间：2015-07-31 22:20 | 作者：张 鑫旭
出处：http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=4889

一、无题

如题。

二、正文

设计师设计了一个图片上传圆环loading进度效果。如下截图：
loading效果截图

首先，CSS3是可以实现的，以前写过一篇转大饼的文章：“ CSS3实现鸡蛋饼饼状图loading等待转转转”。原理跟这个一模一样，两个半区的矩形，然后不同时机巧妙显隐实现。

但是呢，CSS3实现不太好理解，进度控制也不容易，最好直接数值变一变，进度效果就出来。

有没有其他方法呢？

哈，当然有，可以使用同样IE9+支持的SVG.

我们只需要一个实线背景圆，一个虚线变化圆两个圆就可以了。

百闻不如一见，您可以狠狠地点击这里： SVG实现圆环loading进度效果demo

拖动demo下面的range区域选择控件(0-100%)就会发现蓝色高亮圆环跟着一起变化了：
圆环效果截图

SVG代码非常简单，如下示意：

<svg width="440" height="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在SVG中表示描边是虚线，两个值，第一个是虚线的宽度，第二个是虚线之间的间距。下面就是一些虚线数据值以及最后的效果表现（实时，非截图，IE9+浏览）：

<?xml version="1.0"?>
<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />

<style><![CDATA[
line{
    stroke: black;
    stroke-width: 2;
}
]]></style>
</svg>

之前写了篇“ 纯CSS实现帅气的SVG路径描边动画效果”，就是 stroke-dasharray的妙用。

这里也是类似原理。

理解了 stroke-dasharray，我们的事情就简单了，我们只需要让间距永远不小于圆的周长，然后， 虚线的长度 = 百分比值 * 圆的周长就可以了。

简单，超乎想象：

// 假设周长是1068, percent是百分比值
circle.setAttribute('stroke-dasharray', 1068 * percent + " 1069");

就OK了。

哦~~差点忘了。默认 stroke-dasharray的起始位置在右侧，而不是上方，因此，偶们需要使用 transform逆时针旋转90°, 这就是第二个 circle元素上面 transform="matrix(0,-1,1,0,0,440)"的由来。

三、结语

如题。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： http://www.zhangxinxu.com/wordpress/?p=4889

（本篇完）

相关 [tip svg 圆环] 推荐：

小tip: 使用SVG寥寥数行实现圆环loading进度效果

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=4889. 设计师设计了一个图片上传圆环loading进度效果. 首先，CSS3是可以实现的，以前写过一篇转大饼的文章：“ CSS3实现鸡蛋饼饼状图loading等待转转转”. 原理跟这个一模一样，两个半区的矩形，然后不同时机巧妙显隐实现.

小tip: SVG和Canvas分别实现图片圆角效果

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=4242. 一、图片覆盖和CSS3 border-radius实现圆角. 找个中间镂空的图片覆盖在原始图片上，需要跟网页底色一致. 上面两个方法demo有，截图有~. 可是demo上的图片素材一不小心放了个大，我不想换图片，地址就不放了，大家可以YY下.

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画：. 如果你看不到这个演示，说明你的浏览器不支持SVG，请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时，使用js创建一个元素：. // 更高效的计时器，类似于setTimeout，不会发生丢. 已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果，你可能就觉的头都打啦. 不要担心，SVG本身提供的动画属性非常容易使用，今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性：. 在上面的代码中，我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

理解SVG的viewport，viewBox，preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg，设置了viewBox之后，viewBox的长宽值如果都小于svg的viewport的长宽值，那么结果一定是放大；但是viewBox的长宽值一旦有一个值大于vewport之后，最后的实际效果就不是放大，而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

Tip中小三角的实现

- 溪梦 - WEB前端开发
前段时间专门研究了一下腾讯微博的Tip，很有意思. tip中的小箭头是用“◆”（encode为：◆）字符模拟的. 以前也写过类似的实现方案《用css的border属性实现三角》. 用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟. 如图： 注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好.

HBase的一些应用设计tip

- - BlogJava_首页
1，对于HBase的存储设计，要考虑它的存储结构是：rowkey+columnFamily:columnQualifier+timestamp(version)+value = KeyValue in HBase，一个KeyValue依次按照rowkey，columnkey和timestamp有序.

weka特征预处理的一些tip

- - BlogJava-首页技术区
首先，提供两个地址，这里包含了全部的内容原文：. weka可以以目录形式读入数据. 然后再简单说一下weka在做文本特征内容处理时候需要注意的东西：. 声明一点，在weka的gui下是没法使用这个功能的：以目录形式读入数据. 首先，把要处理的数据写入到这样的目录结构下：. 然后在源码包下，命令行执行 java weka.core.converters.TextDirectoryLoader -dir text_example > text_example.arff.