SoKu前端模板扩展素材4年前

网页加载svg圆形进度条插件:svg-gauge

2019-11-25 03:59 评论

摘要

svg-gauge是一款基于SVG的圆形进度条插件。该插件无任何依赖，可以轻松的制作出各种圆形进度条，以及圆形进度条的动画特效。

简介:

svg-gauge是一款基于SVG的圆形进度条插件。该插件无任何依赖，可以轻松的制作出各种圆形进度条，以及圆形进度条的动画特效。

使用简介：

HTML结构

最简单的按钮HTML结构如下。

<div id="cpuSpeed" class="gauge-container"></div>

CSS样式

.gauge-container {
  width: 150px;
  height: 150px;
  display: block;
  padding: 10px;
}
.gauge-container > .gauge > .dial {
  stroke: #eee;
  stroke-width: 2;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 2;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
}

javaScript

// npm install
npm install svg-gauge
// Require JS
var Gauge = require("svg-gauge");
// Standalone
var Gauge = window.Gauge;
// Create a new Gauge
var cpuGauge = Gauge(document.getElementById("cpuSpeed"), {
    max: 100,
    // custom label renderer
    label: function(value) {
      return Math.round(value) + "/" + this.max;
    },
    value: 50,
    // Custom dial colors (Optional)
    color: function(value) {
      if(value < 20) {
        return "#5ee432"; // green
      }else if(value > 40) {
        return "#fffa50"; // yellow
      }else if(value > 60) {
        return "#f7aa38"; // orange
      }else {
        return "#ef4655"; // red
      }
    }
});
// Set gauge value
cpuGauge.setValue(75);
// Set value and animate (value, animation duration in seconds)
cpuGauge.setValueAnimated(90, 1);

Github网址

svg-gauge插件：https://github.com/naikus/svg-gauge

网页进度条进度条特效

支付下载注意：
1.支付成功后不要关闭二维码，等待系统确认后自动关闭，支付按钮变为下载按钮。
2.游客购买请使用 Chrome 、Edge 或 FireFox浏览器，以免支付刷新失败(浏览器缓存7天有效)。
3.如支付成功后刷新无法显示下载按钮、链接失效等问题请联系客服处理或参考下载说明文档。
免责声明：
1.本站资源售价仅为赞助网站，收费仅用于网站维护运营更新，感谢您的支持。
2.本站所发布资源仅限用于学习和研究测试使用，不得用于商业或非法用途。
3.如果购买下载测试后满意，请前往购买支持正版，得到更好的正版服务。
4.本站仅保证资源的正常下载和测试使用，售后不包含相关技术咨询服务，请知悉谅解。
5.本站所发布资源为非实物商品，不接受退款，请考虑好再购买。
Soku云宝库 » 网页加载svg圆形进度条插件:svg-gauge