<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. goDaddy SSL证书 Nginx配置全流程 （转）

    好长时间没动过这玩意了,今天突然用到,忘的一干二净.在此做个笔记吧! 一.购买Godaddy SSL证书 1.打开Godaddy官网 http://www.godaddy.com/: 2.点击网站导航 ...

  2. linux如何安装java环境

    linux安装jdk7步骤: 1.首先使用命令查看linux系统版本号: lsb_release -a 11 2.下载对应的jdk版本,笔者使用的是jdk-7u79-linux-x64.tar.gz: ...

  3. postgres的initdb解析——从一次插件升级失败说起

    我们公司基于postgres开发了一款数据库产品,不用说我们对OSS的源码做了改动,并且也集成和自己编写了一些插件.因此,当postgresql和相关插件升级时,我们也需要将升级反应到自己的产品中去, ...

  4. glusterfs 步骤

    一.下载yum源 # wget http://download.gluster.org/pub/gluster/glusterfs/3.6/LATEST/CentOS/glusterfs-epel.r ...

  5. 如何导入css和js？

    导入css <link rel="stylesheet" href="css路径" type="text/css"> 导入js, ...

  6. A/X家FPGA架构及资源评估

    评估对比xilinx以及altera两家FPGA芯片逻辑资源. 首先要说明, 现今FPGA除了常规逻辑资源,还具有很多其他片内资源比如块RAM.DSP单元.高速串行收发器.PLL.ADC等等,用以应对 ...

  7. MongoDB 基本操作学习笔记

    // 查看所有数据库 show dbs // amdin 0.000GB // local 0.000GB // 使用数据库 use admin // switched to db admin // ...

  8. vim批量注释

    vim批量注释 法一.在vim中 :20,30 s/^/#/g 20-30行 用 # 注释掉.(python是用#注释地---) :20,30 s/^#//g 20-30行 取消注释 法二. 1.多行 ...

  9. Electron 桌面应用打包（npm run build）简述(windows + mac)

    最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录. Windows环境打包:1.首先贴一下package.json. { " ...

  10. Django的思维导图

    本人在学习Django的过程中整理的一些知识点 现在整理成思维导图,在以后查阅的时候可以方便自己.