<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. 两层嵌套list，选取list中最长的list的长度

    # coding=utf-8 import pandas as pd file_path = "test_aa.xlsx" dt = pd.read_excel(file_path ...

  2. JS动态获取当前时间

    HTML部分: <div class="div"> <div id="div"> </div> </div> C ...

  3. Linux指令--ping

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说"ping一下某机器,看是不是开着".不能打开网页时会说"你先ping网关地址 ...

  4. 国内不谈java

    今天晚上在整理电脑,不知道怎么回事,电脑里面放着一篇文章.打开一看写的挺好的,现在就贴出来,望共勉.   国内不谈java--会有千万人跳出来和你争嘴的.越是如此,我越是不忍心不说出来,越是不不忍心看 ...

  5. 图片文档倾斜矫正算法 附完整c代码

    2年前在学习图像算法的时候看到一个文档倾斜矫正的算法. 也就是说能将一些文档图像进行旋转矫正, 当然这个算法一般用于一些文档扫描软件做后处理 或者用于ocr 文字识别做前处理. 相关的关键词: 抗倾斜 ...

  6. Java NIO 之 Selector

    Selector是SelectableChannel的多路选择器,配合SelectableChannel实现非阻塞IO. 详见代码 /** * Selector 是 SelectableChannel ...

  7. VUE脚手架搭建

    1.什么vue-cli    vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的. 步骤: 2.安装   ->全局安装   npm install vue-cli -g 或 ...

  8. JAVA常用知识点及面试题总结

    1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...

  9. mui页面跳转（传值+接收）

    <script type="text/javascript" charset="utf-8"> mui.init(); mui.plusReady( ...

  10. iOS-属性字符串添加下划线、删除线

    常用到的属性字符串 ///定义属性字符串NSMutableAttributedString *att = [[NSMutableAttributedString alloc]initWithStrin ...