如何使用第三方jQuery插件（圆形进度条）

最新推荐文章于 2025-05-16 16:10:17 发布

原创最新推荐文章于 2025-05-16 16:10:17 发布 · 836 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #圆形进度条 #插件

本文详细介绍如何使用jQuery插件实现一个带有动画效果的圆形进度条，包括资源下载、引入JS和CSS文件、HTML结构设置及JS初始化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先去找jQuery网站，http://www.htmleaf.com/，这个免费的比较多，当然也有别的，具体用什么可以自行百度。下面以圆形进度条为例。

搜索资源，我找到了这个比较符合我的需求。http://www.htmleaf.com/jQuery/jquery-tools/201907195740.html
进入网站，点击下载插件
解压该资源
新建js文件夹，把下载好的js资源文件导入，只需要这两个（circle-progress.min.js，jquery.circle-progress.min.js）
新建空白的index.html
在head标签下引入如下代码

<!-- 纯 JavaScript -->
<script src="js/circle-progress.js"></script>
 
<!-- jQuery插件 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jquery.circle-progress.js"></script>

7. 写入html

<div class="progress"></div>

8. 引入css文件

<link rel="stylesheet" type="text/css" src="css/css.css">

css.css:

.circle-progress-value {
	stroke-width: 6px;
	stroke: hsl(39, 100%, 50%);
}
.circle-progress-circle {
	stroke-width: 6px;
	stroke: hsl(39, 100%, 85%);
}
.circle-progress-text {
	fill: hsl(39, 100%, 50%);
}

9,初始化js

<script type="text/javascript">
	new CircleProgress('.progress', {
	max: 100,
	value: 60,
	textFormat: 'percent',
});
</script>

最终结果：

带动画的圆形进度条就实现了，这个插件也提供了别的配置用来调整样式和功能，可以去参考他的

说明文件。