svg实现圆环进度条

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>圆环进度条</title>
<style type="text/css">
circle{
  -webkit-transition: stroke-dasharray .25s;
  transition: stroke-dasharray .25s;
}
</style>
<script>
window.onload = function () {
  if (window.addEventListener) {
    var range = document.querySelector("#range");
    var circle = document.querySelectorAll("circle")[1];
    if (range && circle) {
      range.addEventListener("change", function () {
        console.log(this.value,2*Math.PI*50);
        var percent = this.value / 100, lineLength = 2*Math.PI * 50;
        circle.setAttribute(‘stroke-dasharray‘, lineLength* percent + " " + lineLength * (1 - percent));
      });
    }
  }
}
</script>
</head>
<body>
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" stroke-width="10" stroke="#D1D3D7" fill="none"></circle>
  <circle cx="100" cy="100" r="50" stroke-width="10" stroke="#00A5E0" fill="none"  stroke-dasharray="0 50">
  </circle>
</svg>
<p>拖我：<input id="range" type="range" min="0" max="100" value="0" style="width:300px;"></p>
</body>
</html>

原文地址：https://www.cnblogs.com/94pm/p/11515628.html

时间： 2024-08-28 07:12:48

svg实现圆环进度条的相关文章

两种CSS3圆环进度条详解

晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第一种:通过overflow溢出隐藏的方式: 这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余. 先看HTML结构: <div class="circle-one"> <div class="circle

ProgressWheel：Android开源圆环进度条

这是一个自定义Android组件,用于代替标准进度条组件.实现各种进度条样式,包括圆环,扫描等. XML: 在你的attr.xml(res/value)中加入以下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <declare-styleable name="ProgressWheel"> <attr name="text"format="string"/> <attr name=&q

用Raphael在网页中画圆环进度条

原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆放就不太好看了.随着css3的出现,圆环状的进度条开始用得越来越多,不过由于IE6/7/8不支持css3,我们只能换其它方法来实现.本文就采用 Raphael来画一个,这个组件对svg和vml进行了一个统一的封装,根据浏览器使用不同的技术实现绘制,因此IE也能用. 先上效果图: 效果还不错吧?代码其实也不复杂,抛砖引玉一下

svg的圆形进度条

目前发现svg实现一些动画效果是比较高效简单的. 如圆形进度条,只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现,而且美观. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .svg{ transfo

android自定义渐变圆环进度条

先看下效果: 分析:比较常见于扫描结果.进度条等场景利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变同样的道理,可以画出长条进度条,扇图饼图等,感兴趣可以试下.. package com.liujing.progressviewdemo; /*** *

ios 画圆环进度条

#import <UIKit/UIKit.h> @interface SNCircleProgressView : UIView /** * 进度值0-1.0之间 */ @property (nonatomic,assign)CGFloat progressValue; /** * 边宽 */ @property(nonatomic,assign) CGFloat progressStrokeWidth; /** * 进度条颜色 */ @property(nonatomic,strong)UI

采用Angular勾画SVG圆环形进度条

// shim layer with setTimeout fallback // credit Erik M?ller and http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length &am

SVG画圆形进度条

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5自由者</title> <style> #svgForStroke { position: absolute; top: 0; left: 0; width: 200px; height: 200px; stroke-dasharray: 180%; stroke-dasho

用svg实现上传图片进度条效果

demo:http://codepen.io/tianzi77/pen/jPXRKo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <svg width="440" height="