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. svn co 与ssl

    默认情况下, yum安装的svn用的是GnuTLS, 而不是ssl, 导致checkout https协议打包的svn repo的时候会报错. 解决方法是用openssl重新编译安装svn.注意ssl ...

  2. 数论v2

    #include <cmath> #include <cstdio> #include <cstring> #include <algorithm> # ...

  3. Tomcat部署Web应用的两种方式

    WEB工程目录结构 部署方式一:此种方式部署,jsp页面修改后,不能动态更新,需要重新部署才能看到效果.不过可以配置动态更新实现. 部署方式二:此种方式部署,jsp修改后,直接在页面可以看到效果.(因 ...

  4. 关闭CENTOS不必要的默认服务

    CentOS关闭服务的方法: 图形界面,运行ntsysv chkconfig –level 2345 服务名称 off 服務名稱 建議 說明 acpid 停用 Advanced Configurati ...

  5. STL---vector（向量）

    1 基本操作 (1)头文件#include<vector>. (2)创建vector对象,vector<int> vec; (3)尾部插入数字:vec.push_back(a) ...

  6. wxPython：事件

    事件──── 是每个 GUI 应用不可舍割的一部分,因为所有的 GUI 应用程序都是基于事件驱动的.从 GUI 程序启动开始,它就回应同户的不同类型的事件.除了用户,也有其它因素可以产生事件,例如:互 ...

  7. oracle 学习

    一.数据库语言部分1. SQL语言:关系数据库的标准语言2. PL/SQL:过程化语言Procedural Language3. SQL*Plus:简单的报表,操作系统接口 4. Oracle 8.0 ...

  8. frxReport 设计 (mtm)

    ► 设计  frxReport  frxReport 窗体上放一个  [frxReport] 的控件 双击 [frxReport]控件 进入设置模式 frxReport1.ShowReport() 方 ...

  9. Java Thread.join()方法

    一.使用方式. join是Thread类的一个方法,启动线程后直接调用,例如: Thread t = new AThread(); t.start(); t.join(); 二.为什么要用join() ...

  10. RTX闪退（打开闪退，收发文件闪退）

    之前遇到RTX只要一打开就闪退的情况,覆盖重装了RTX不管用,换了一个位置安装,然后问题解决了 又遇到一个问题,收文件或发文件就闪退,覆盖重装了不管用,换了位置安装还是不管用,清理垃圾·清理注册表不管 ...