开源实现：https://github.com/lugolabs/circles

自行实现：圆环与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>

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

  1. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  2. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  3. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

  4. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  5. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  6. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  7. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

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

    原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着cs ...

  9. H5 可堆叠的圆环进度条，支持任意数量子进度条

    by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...

随机推荐

  1. 安装mininet 一直显示 ‘Cloning into openflow'

    问题描述. 安装mininet卡在了下载openflow. git clone --branch 2.2.2 git@github.com:mininet/mininet.git ,然后输入命令./i ...

  2. Java的死锁及解决思路(延伸: 活锁,饥饿,无锁)

    死锁: A线程持有 锁1,接下来要获取锁2:与此同时,B线程持有锁2,要获取锁1.两个线程都在等对方释放自己需要的锁,这时两方会永远等待下去,就形成了死锁. 死锁的四个必要条件: 1.互斥:资源(锁) ...

  3. vue使用formData进行文件上传

    本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...

  4. Spark程序进行单元测试-使用scala

    Spark 中进行一些单元测试技巧:最近刚写了一点Spark上的单元测试,大概整理了一些 rdd测试 spark程序一般从集群中读取数据然后通过rdd进行转换,这其中涉及到集群,每次修改bug,上传到 ...

  5. H3C Telnet 配置

    Telnet 配置管理方法是网络工程师和网络管理员使用最广泛的一种设备访问控制方法,它通过局域网或广域网实现本地或远程的访问控制,但是它的实验必须要求首先对设备进行初始化配置,否则用户无法正常登录和访 ...

  6. Freemarker语法收集

    1. 取数组第一项 <#if subModelList?? && (subModelList?size > 0)> <#assign subFirst = su ...

  7. [Bayes] MCMC (Markov Chain Monte Carlo)

    不错的文章:LDA-math-MCMC 和 Gibbs Sampling 可作为精进MCMC抽样方法的学习材料. 简单概率分布的模拟 Box-Muller变换原理详解 本质上来说,计算机只能生产符合均 ...

  8. codeMirror配置

    介绍 CodeMirror是一款在线的支持语法高亮的代码编辑器.官网:http://codemirror.net/ 下载后,解压开到的文件夹中,lib下是放的是核心库和核心css,模式下放的是各种支持 ...

  9. 两种Redis持久化原理的详解

    Redis为持久化提供了两种方式: RDB:在指定的时间间隔能对你的数据进行快照存储. AOF:记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据. 本文将通过下面内容的介 ...

  10. ELK - nginx 日志分析及绘图

    1. 前言 先上一张整体的效果图: 上面这张图就是通过 ELK 分析 nginx 日志所得到的数据,通过 kibana 的功能展示出来的效果图.是不是这样对日志做了解析,想要知道的数据一目了然.接下来 ...