<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. 利用 HTML5 WebGL 构建的 3D 拓扑图

    现在,3D 模型已经用于各种不同的领域.在医疗行业使用它们制作器官的精确模型:电影行业将它们用于活动的人物.物体以及现实电影:视频游戏产业将它们作为计算机与视频游戏中的资源:在科学领域将它们作为化合物 ...

  2. 一篇文章帮你解决python的包管理

    写python代码的人都知道,一个项目写下下来,不可避免的都需要使用很多第三方包,通常我们都是通过pip install ,然而当我们需要上线的时候问题来了,如果中间你自己不记得自己安装了多少个包,这 ...

  3. 修改ncnn的openmp异步处理方法 附C++样例代码

    ncnn刚发布不久,博主在ios下尝试编译. 遇上了openmp的编译问题. 寻找各种解决方案无果,亲自操刀. 采用std::thread 替换 openmp. ncnn项目地址: https://g ...

  4. 美国不同C段服务器，多ip服务器

    作为多IP服务器的拓展,多C段服务器,例如:IP分为4段,A段,B段,C段,D段.192.168.0.1/24代表着一个C段,可用IP段为192.168.0.1-255,一个C段有253个可用IP.一 ...

  5. 云计算之路-阿里云上：部分服务器未及时续费造成docker swarm集群故障

    非常非常抱歉,由于我们的疏忽 —— docker swarm 集群中的 2 台服务器没有及时续费,造成在夜里0点被自动关机,从而引发整个 docker swarm 集群故障,造成今天凌晨 0:30 ~ ...

  6. python_爬百度百科词条

    如何爬取? 明确目标:爬取百度百科,定初始百度词条:python,初始URL:http://baike.baidu.com/item/Python,爬取数据量为1000条,值爬取简介,标题,和简介中u ...

  7. UUID.randomUUID().toString()

    UUID.randomUUID().toString()是javaJDK提供的一个自动生成主键的方法.UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机 ...

  8. Hibernate （二）

    1 一级缓存的引入 示例: @Test public void testUpdate(){ Configuration configuration = new Configuration().conf ...

  9. Mysql之左连接右连接内连接——示例 （转）

    下面是两张表 表stu 表tech 1.右连接 当使用右连接语句查询时,返回结果如下: 1 SELECT stu.id,stu.name,stu.classe_name,tech.id,tech.na ...

  10. Windows下Nginx实现负载均衡

    Apache,Nginx Apache和Nginx都属于属于 静态页面服务器,都有插件支持动态编程语言处理,但Nginx的IO模比Apache更适合跑代理.所以一般都作为前端缓冲代理(Nginx的反向 ...