svg实现圆环进度条

矫情吗；* 2023-10-11 11:22 32阅读 0赞

开源实现：[https://github.com/lugolabs/circles][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>

转载于:https://www.cnblogs.com/94pm/p/11515628.html

[https_github.com_lugolabs_circles]: https://github.com/lugolabs/circles

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关 svg实现圆环进度条

开源实现：[https://github.com/lugolabs/circles][https_github.com_lugolabs_circles] 自行实现：圆环与s

矫情吗；*/ 2023年10月11日 11:22/ 0 赞/ 33 阅读

相关 SVG实现环形进度条的原理

![format_png][] 之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于

系统管理员/ 2022年12月19日 01:29/ 0 赞/ 188 阅读

相关 SVG 进度条绘制

<svg width="150px" height="150px" class="svg"> <circle cx="75" cy="75" r="

缺乏、安全感/ 2022年12月07日 04:29/ 0 赞/ 196 阅读

相关 echarts实现圆形进度条，圆环中心显示进度

目录一：效果图二：环境三：上代码四：巧妙的思路五：参考一：效果图 ![在这里插入图

柔光的暖阳◎/ 2022年11月22日 00:18/ 0 赞/ 961 阅读

相关原生svg 绘制进度条

效果图 ![在这里插入图片描述][20210708143840898.gif] 本次进度条运用到svg 和 circle标签对此方面不太熟悉的小伙伴可以收藏记录防

Love The Way You Lie/ 2022年10月18日 14:58/ 0 赞/ 270 阅读

相关 html 圆环实现多种颜色,SVG实现多彩圆环倒计时效果的示例代码

圆环倒计时我们经常见到，实现的方法也有很多种。但是本文将介绍一种全新的实现方式，使用SVG来实现倒计时功能。本文主要用到了SVG的stroke-dasharray和stro

- 日理万妓/ 2022年10月07日 04:57/ 0 赞/ 210 阅读

相关【百度echarts】实现圆环进度条-代码示例

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

迈不过友情╰/ 2022年07月12日 06:18/ 0 赞/ 1453 阅读

相关【百度echarts】实现圆环进度条-代码示例代码demo

【百度echarts】实现圆环进度条-代码示例 <!DOCTYPE html> <html lang="en"> <head> <me

￡神魔★判官ぃ/ 2022年05月10日 03:16/ 0 赞/ 233 阅读

相关 android 圆环进度view

新建RoundProgressBar class RoundProgressBar : View { private val paint =

迷南。/ 2021年10月19日 03:01/ 0 赞/ 320 阅读

相关用Canvas画圆环百分比进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-eq

浅浅的花香味﹌/ 2021年09月14日 00:14/ 0 赞/ 551 阅读