使用 SVG 图像创建进度条 - jQuery Progress.js

使用 SVG 图像创建进度条 - jQuery Progress.js

版本:

浏览量:1135

最后更新:2021-09-11

应用标签:gitMAC 软件Jquery插件

推荐指数:

详细信息

一个轻量级且易于使用的 jQuery 进度条插件,通过填充您最喜欢的 SVG 图像的背景颜色来可视化百分比值。

也可以看看:

  • 极简文本加载进度指示器插件 - txtProgress

  • 使用 jQuery 和 CSS3 的图像加载动画插件 - LoadGo

  • 带有 JavaScript 和 SVG 路径的动画进度指示器 – ProgressBar.js

  • 10 个最佳圆形/径向进度条 JavaScript 插件

  • JavaScript 和 CSS 中的 10 个最佳进度条(线性)组件

如何使用它:

1.progress.js加载最新的 jQuery 库后,导入必要的 JavaScript

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/progress.js"></script>

2. 将 SVG 图像嵌入到您的文档中并使用以下 HTMLdata属性自定义进度条

  • 数据类:附加 CSS 类

  • data-percent:百分比值

  • 数据颜色:填充颜色

  • data-animation: 动画速度

<!-- Using Font Awesome Icons -->
<i id="myId" data-class="myClass" data-percent="80" data-color="#ff5733" data-animation="500" class="fab fa-html5 progressIcon"></i>
 
<!-- Using Font Awesome Icons -->
<span data-percent="50" data-color="rgba(168, 255, 51, 0.5)" data-animation="1500" class="bi bi-align-start progressIcon"></span>
 
<!-- Using An Inline SVG Image -->
<svg data-percent="50" data-color="#ff5733" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill progressIcon" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
</svg>
 
<!-- Using Img Tag -->
<img data-percent="60" class="progressIcon" height="200px" src="1.svg" hspace="20"/>

变更日志:

2021-02-27

  • 错误修正

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。