<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. Linuxc - define 与 typedef的区别

    预处理就是讲一些头文件展开. 预处理还会将使用到宏定义的值替换为真正的值.宏只是单纯的字符串的替换. #define 宏定义 眼里没有语法,不用分号结尾. typedef 定义别名,是有语法的,要用分 ...

  2. yarn 淘宝源安装与使用用法

    Yarn 淘宝源 yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_sit ...

  3. 实现iota函数

    void Reverse(char *s) { char temp; char *p = s; char *q = s; while (*p != '\0') { p ++; } q --; whil ...

  4. CSS--开篇

    1,什么是CSS? 层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素,用来控制网页的样式和布局. 引入CSS后:HTML标记专门用于定义网页的内容,而使用CSS来 ...

  5. 【转】shell学习笔记（二） ——shell变量

    在shell中有3种变量:系统变量,环境变量和用户变量,其中系统变量在对参数判断和命令返回值判断时会使用,环境变量主要是在程序运行时需要设置,用户变量在编程过程中使用量最多. 1 系统变量  变量名 ...

  6. php之插入排序

    <?phpfunction insertSort($arr) {  //插入排序    $len = count($arr);    for($i=1;$i<$len;$i++){     ...

  7. [DeeplearningAI笔记]Multi-class classification多类别分类Softmax regression_02_3.8-3.9

    Multi-class classification多类别分类 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.8 Softmax regression 原有课程我们主要介绍的是二分分类( ...

  8. tf.train.shuffle_batch函数解析

    tf.train.shuffle_batch (tensor_list, batch_size, capacity, min_after_dequeue, num_threads=1, seed=No ...

  9. pip相关工具使用小结

    最近写taffy的时候用到了两个pip相关的小工具. 一个是pip-review批量更新lib库,一个是pipreqs生成基于项目的requirements.txt. 1. pip相关命令 #更新单个 ...

  10. 用swing做一个简单的正则验证工具

    直接上代码吧,因为我对swing也不熟悉,照着API一点点拼出来的. import java.awt.event.ActionEvent; import java.awt.event.ActionLi ...