html5 svg 圆形进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5中的SVG属性实现圆形进度条效果</title>

    <style>

        #a{color:red;}

    </style>

</head>

<body>

<svg width="440" height="440">

    <text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text>

    <circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>

    <circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"

            transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>

</svg>

<script>

    var circle = document.getElementById("c1");

    var a = document.getElementById("a").innerHTML;

    var b=parseInt(a)/100;

        var percent = 0, perimeter = Math.PI * 2 * 170;

    setInterval(function () {

        if(percent<b){

            circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));

            percent+=1/100;

        }

    },100);

</script>

</body>

</html>

html5 svg 圆形进度条的更多相关文章

  1. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

  2. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  3. 兼容ie8的圆形进度条

    主要是利用html5中的svg 画出圆形进度条 并且兼容ie8 https://github.com/GainLoss/Circular-progress-bar

  4. Highcharts 测量图；Highcharts 圆形进度条式测量图；Highcharts 时钟；Highcharts 双轴车速表；Highcharts 音量表（VU Meter）

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  5. vue 圆形进度条组件解析

    项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

  6. android 自定义控件——（四）圆形进度条

    ----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...

  7. WPF 实现圆形进度条

    项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...

  8. HTML5有特色的进度条

    查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm 完整代码如下: <!DOCTYPE html> <html> <head ...

  9. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

随机推荐

  1. EXTJS动态改变store的proxy的params

    动态改变store的条件参数.var store = win.down('grid[name=sourceGrid]').getStore(); Ext.apply(store.proxy.extra ...

  2. 为MongoDB创建一个Windows服务

    一:选型,根据机器的操作系统类型来选择合适的版本,使用下面的命令行查询机器的操作系统版本 wmic os get osarchitecture 二:下载并安装 附上下载链接 点击安装包,我这里是把文件 ...

  3. ADO.NET中的五个主要对象

    Connection:主要是开启程序和数据库之间的连接.没有利用连接对象将数据库打开,是无法从数据库中取得数据的.Close和Dispose的区别,Close以后还可以Open,Dispose以后则不 ...

  4. struts2 中属性驱动（其实就是struts2 action 中处理 request 的参数【old 方式servlet api 封装数据到javabean中（or beanutils）】），这里属性驱动是新方式

    1.属性驱动 a\  一般的set public class UserAction extends ActionSupport { private String username; private S ...

  5. 用普通用户通过sudo进行启动tomcat时报如下异常

    用普通用户通过sudo进行启动tomcat时报如下异常 tomcat user 不在 sudoers 文件中.此事将被报告. 这是由于sudo命令使用root用户执行命令.而处于安全性的考虑,一般不允 ...

  6. rsa加密解密

    2016年3月17日 17:21:08 星期四 现在越来越懒了.... 参考: http://www.xuebuyuan.com/1399981.html 左边是加密流程, 右边是解密流程 呃...有 ...

  7. Python 开发轻量级爬虫02

    Python 开发轻量级爬虫 (imooc总结02--爬虫简介) 爬虫简介 首先爬虫是什么?它是一段自动抓取互联网信息的程序. 什么意思呢? 互联网由各种各样的的网页组成,每一个网页都有对应的url, ...

  8. Greedy:Cow Acrobats(POJ 3045)

    牛杂技团 题目大意:一群牛想逃跑,他们想通过搭牛梯来通过,现在定义risk(注意可是负的)为当前牛上面的牛的总重量-当前牛的strength,问应该怎么排列才能使risk最小? 说实话这道题我一开始给 ...

  9. Mathematics:GCD & LCM Inverse(POJ 2429)

    根据最大公约数和最小公倍数求原来的两个数 题目大意,不翻译了,就是上面链接的意思. 具体思路就是要根据数论来,设a和b的GCD(最大公约数)和LCM(最小公倍数),则a/GCD*b/GCD=LCM/G ...

  10. windows编程中关于“关闭窗口无法退出进程”的解决方法

    一般会出现如下两种情况 1.WinMain函数中,最后阶段接收消息队列循环中,调用的GetMessage函数参数提供错误 如: while (GetMessage(&msg,hwnd, 0, ...