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. bootstrap 响应式布局

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...

  2. Docker个人学习总结

    最近一段时间学习了下Docker,关于Docker的安装,运用什么的在这里我不会过多的说明,我只说我对于Docker的一些理解,附加我用于记录的少量代码. 刚开始学习Docker的时候,找资料在网上看 ...

  3. Convert a given Binary Tree to Doubly Linked List

    The question and solution are from: http://www.geeksforgeeks.org/convert-given-binary-tree-doubly-li ...

  4. Java 抽象类与oop三大特征

    面向对象主要有三大特性:继承和多态.封装. 一.抽象类 在了解抽象类之前,先来了解一下抽象方法.抽象方法是一种特殊的方法:它只有声明,而没有具体的实现.抽象方法的声明格式为: abstract voi ...

  5. 64位win系统上面tomcat6启动不了 window不能再本地计算机启动

    64位的jdk装完之后,jre的bin目录下面没有client文件夹, 而tomcat6.0.20的默认配置启动在client文件夹下面. 所以打开tomcat6w,在java选项界面,取消Use d ...

  6. iOS基础框架的搭建/国际化操作

    1.基础框架的搭建 1.1 pod引入常用的第三方类库 1.2 创建基础文件夹结构/目录结构 Resource———存放声音/图片/xib/storyboard 等资源文件 Define——宏定义, ...

  7. Greedy:Physics Experiment(弹性碰撞模型)(POJ 3848)

    物理实验 题目大意:有一个与地面垂直的管子,管口与地面相距H,管子里面有很多弹性球,从t=0时,第一个球从管口求开始下落,然后每1s就会又有球从球当前位置开始下落,球碰到地面原速返回,球与球之间相碰会 ...

  8. 【processing】小代码2

    函数: 绘制直线自由图形: beginShape(), vertex(), endShape() 分别是绘制图形开始,连接图形的节点,绘制结束 endShape(CLOSE)表示闭合图形. 绘制曲线边 ...

  9. 【python】pymongo查找某一时间段的数据

    python中实现: 下面代码就是查找2016-09-26 00:00:00 ~ 2016-09-27 00:00:00 时间段的数据 from datetime import datetimefor ...

  10. (2016弱校联盟十一专场10.2) A.Nearest Neighbor Search

    题目链接 水题,算一下就行. #include <bits/stdc++.h> using namespace std; typedef long long ll; ll x[],y[], ...