<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. SVN的安装和配置

    SVN为程序开发团队常用的代码管理,版本控制软件:下面我们来介绍TortoiseSVN的安装,和其服务器的搭建:(下面为windows 64位系统下的搭建) 闲来无事,就在本地搭建了一个SVN环境,网 ...

  2. ETL工具--kettle篇（17.10.09更新）

    ETL是EXTRACT(抽取).TRANSFORM(转换).LOAD(加载)的简称,实现数据从多个异构数据源加载到数据库或其他目标地址,是数据仓库建设和维护中的重要一环也是工作量较大的一块.当前知道的 ...

  3. Linuxc - 标准输入流、标准输出流、标准错误流

    输入流stdin默认是键盘,输出流stdout默认是显示器,错误流stderr #include <stdio.h> int main() { printf("请输入选择的数字: ...

  4. IOS @proporty 关键字（一）retain strong

    @interface User : NSObject @property (nonatomic,retain) NSString* tRetain; @property (nonatomic,assi ...

  5. 搞个小项目吧，做一个ppt播放器

    先来两个参考链接,接下来再进行实战 http://www.geek-workshop.com/forum.php?mod=viewthread&tid=1137 http://www.geek ...

  6. scss 初学笔记 三 继承

    //继承 .btn{ padding: 4px 10px; font-size: 14px; } .primary{ background:red; @extend .btn; } //%placeh ...

  7. MySQL存储过程中declare和set定义变量的区别

    在存储过程中常看到declare定义的变量和@set定义的变量.简单的来说,declare定义的类似是局部变量,@set定义的类似全局变量. 1.declare定义的变量类似java类中的局部变量,仅 ...

  8. PPT基础教程

    在当前演示文稿中增加新的幻灯片:快捷键>>ctrl+M  或者将鼠标定位到左侧窗格,然后按下回车键enter 母版??? 默认版式是"标题和文本"     右键 > ...

  9. convert图像格式批量转换

    问题:利用GMT绘制生成了eps格式的图像,为了将图像插入到word中,且保持较高的分辨率,利用convert进行图像格式转换,将eps转换成tiff格式. code:  $i ${name}.tif ...

  10. SpringMVC空字符串转为null

    空字符串转为null 现在我遇到这样一个需求,那就是我想要吧前端传过来的值变为空,因为所谓前端的校验,其实都不是校验,如果前端传给后台一个表单,可是表单未填入值,我们后台进行判断的时候 既需要判断nu ...