<svg width="440" height="440" viewbox="0 0 440 440">

         <circle cx="220" cy="220" r="220"  fill="#ddd"></circle>

         <circle cx="220" cy="220" r="110" stroke-width="220" stroke="#00A5E0" transform="matrix(0,-1,1,0,0,440)" fill="#ddd">

         </circle>

 </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

HTML5-svg圆形饼状图进度条实现原理的更多相关文章

  1. ios swift 实现饼状图进度条，swift环形进度条

    ios swift 实现饼状图进度条 // // ProgressControl.swift // L02MyProgressControl // // Created by plter on 7/2 ...

  2. css3实现饼状图进度及环形进度条

    1 <!-- 饼图 --> <div class="pie"></div> <hr /> <!-- 环形图 --> &l ...

  3. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. PSP 进度条 柱状图 饼状图

    9号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小组 ...

  5. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  6. 【应用】SVG饼状图

    <!DOCTYPE html> <html> <head> <title></title> </head> <body o ...

  7. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  8. 封装构造函数，用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

  9. PHP画矩形，椭圆，圆，画椭圆弧 ，饼状图

    1:画矩形: imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere ...

随机推荐

  1. Python调用外部程序——os.system()和subprocess.call

    通过os.system函数调用其他程序 预备知识:cmd中打开和关闭程序 cmd中打开程序 a.打开系统自带程序 系统自带的程序的路径一般都已加入环境变量之中,只需在cmd窗口中直接输入程序名称即可. ...

  2. 批处理注册dll时候 遇到错误：模块已加载，但对***dll的调用失败

    解决方法 在批处理的第一行加入:cd /d %~dp0 然后在批处理上右键选择使用管理员权限运行

  3. 【处理多服务器日志合并处理问题】多服务器的日志合并统计——apache日志的cronolog轮循

    转发:http://www.chedong.com/tech/rotate_merge_log.html   内容摘要:你完全不必耐心地看完下面的所有内容,因为结论无非以下2点:1 用 cronolo ...

  4. 第二章 在HTML中使用JS

    script 标签 属性 src   : 可选 包含要执行的外部文件 type : 表示编写代码使用的脚本语言的内容类型(MINI类型) text/javascript async: 可选 只对外部脚 ...

  5. vs2005配置OpenCv2.3.1

    编译OpenCv 1 用CMake导出VC++项目文件 运行cmake-gui,设置where is the source code路径为OpenCV安装路径(本文档假定安装位置为:c:\OpenCV ...

  6. JAR包数字签名与验证

    经签名的Jar包内包含了以下内容: 原Jar包内的class文件和资源文件 签名文件 META-INF/*.SF:这是一个文本文件,包含原Jar包内的class文件和资源文件的Hash 签名block ...

  7. Python 正则表达式 (python网络爬虫)

    昨天 2018 年 01 月 31 日,农历腊月十五日.20:00 左右,152 年一遇的月全食.血月.蓝月将今晚呈现空中,虽然没有看到蓝月亮,血月.月全食也是勉强可以了,还是可以想像一下一瓶蓝月亮洗 ...

  8. 关于oracle视图小结

    关于oracle的视图小记:一. 视图:就是对SQL语句的封装,使用起来更方便.不易出错 优点: 1.简化数据操作:视图可以简化用户处理数据的方式 2.着重于特定数据:不必要的数据或敏感的数据可以 不 ...

  9. 自己用的一套reset.css,打算整理一下方便以后用，持续更新中，各位大神，不喜勿喷

    *{margin: 0; padding: 0;border:none;}img{vertical-align: top;width: 100%;border: none;}ul,li{list-st ...

  10. [UWP]实现Picker控件

    1. 前言 在WPF中,很多打开下拉框(Popup或Flyout)选择一个结果值的控件,除了ComboBox等少数例外,这种控件都以-Picker做名称后缀.因为要打开关闭下拉框和计算下拉框的弹出位置 ...