<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. MySQL时间差返回月个数

    select PERIOD_DIFF(date_format(now(),'%Y%m'),date_format('2010-11-30','%Y%m')) 1. MySQL 为日期增加一个时间间隔: ...

  2. 什么是bgp线路

    https://www.douban.com/note/319956581/ BGP(边界网关协议)主要用于互联网AS(自治系统)之间的互联,BGP的最主要功能在于控制路由的传播和选择最好的路由.中国 ...

  3. kafka学习

    kafka名词解释和工作方式: Producer :消息生产者,就是向kafka broker发消息的客户端. Consumer :消息消费者,向kafka broker取消息的客户端 Topic : ...

  4. Linkin大话eclipse快捷键

    刚来这家公司的时候,作为菜鸟的我在帮别人调试代码的时候,有人说我快捷键使用的很熟悉. 呵呵,工欲善其事必先利其器,以下这些快捷键是最常用的也是要必须记住的. [Ctrl开头] Ctrl+1:快速修复 ...

  5. 验证插件——jquery.validate.js

    下载地址:http://download.csdn.net/download/s592652578/9457421 教程:http://www.runoob.com/jquery/jquery-plu ...

  6. Git的基本原理与常用命令[二]

    标签(linux): git 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 git 的四个区域 四种状态 常用命令 git add #加入暂存(索引区) git ...

  7. Problem C: Pie

    题目链接 http://codeforces.com/gym/100722/attachments/download/3466/20062007-northwestern-european-regio ...

  8. Ready!Api创建使用DataSource和DataSourceLoop的循环测试用例

    step one:在testSuite(假如没有,新建一个)下新建一个testcase,并新建一个DataSource(注意:创建数据源时,一定要把request中所有的传参字段都放到数据源字段中&l ...

  9. asp.net 发布程序到iis后无法连接到oralce数据库问题

    在应用程序池里面,选中你的站点所使用的应用程序池->高级设置->启用32位应用程序->true

  10. JAVA关键字Volatile的特性

    一.简述: 关键字Volatile是JAVA虚拟机提供的最轻量级的同步机制,但是它并不容易完全被正确.完整的理解,以致于许多程序员在遇到需要处理多线程数据竞争的时候一律使用synchronized来进 ...