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. wav转aac

    //调用neroAacEnc.exe STARTUPINFO si={}; PROCESS_INFORMATION pi={};//隐藏窗口 si.cb=sizeof(si); si.dwFlags= ...

  2. 一个简单的log

    #pragma once #include <windows.h> #include <process.h> class CLogger { public: static CR ...

  3. 转：JQuery选择器

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理 解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...

  4. typedef使用大全(转)

    typedef使用大全(转) 一.数组typedef到处都是,但是能够真正懂得typedef使用的不算太多.对于初学者而言,看别人的源码时对到处充斥的typedef往往不知所错,而参考书又很少,所以在 ...

  5. neutron 同一虚拟网卡的多个IP设置

    neutron port-update <端口ID> --fixed-ip subnet_id=<子网ID/子网名>,ip_address=<IP地址> --fix ...

  6. 如何区分SNAT和DNAT

    从定义来讲它们一个是源地址转换,一个是目标地址转换.都是地址转换的功能,将私有地址转换为公网地址.要区分这两个功能可以简单的由连接发起者是谁来区分:       内部地址要访问公网上的服务时(如web ...

  7. 用Kibana和logstash快速搭建实时日志查询、收集与分析系统

    Logstash是一个完全开源的工具,他可以对你的日志进行收集.分析,并将其存储供以后使用(如,搜索),您可以使用它.说到搜索,logstash带有一个web界面,搜索和展示所有日志. kibana ...

  8. Oracle: SQL组合不同字段作为一个查询条件

    前端程序传过来的值是有三个字段组合之后的结果,后端程序处理,并且将查询的数据反馈给前端. PS:不能直接使用字段RPT_NO的,因为在这条记录中RPT_NO恰好等于其他三个字段的组合值. 正确的做法是 ...

  9. cf515d

    题意:给出一个矩阵迷宫,要求用1×2的积木填满空白区域,问解法是否唯一,如果无解或者多解均输出“Not unique". 分析:广搜.看似二分图匹配但实际上不是. 我们认为每个点和上下左右四 ...

  10. VS2010工程文件减肥

    由于VS2010中新增加了sdf和ipch文件等浏览数据库来支持智能浏览感知编辑.显示类视图等,使得随便一个小工程就上百兆,很占用空间也不方便工程项目的打包备份.为了不使用数据库以减小VS2010中的 ...