percircle.js 是一个轻量级的 jQuery 插件，用于创建一个纯 CSS 圆/环来表示使用 CSS3 转换和一点 JavaScript 的百分比数据。
非常适合为您的 Web 应用程序创建进度条或加载指示器。
也可以看看：
最佳圆形/径向进度条 JavaScript 插件
安装：
# Yarn
$ yarn add percircle
# NPM
$ npm install percircle --save如何使用它：
1. 在网页上包含jQuery 库以及jQuery percircle 的JavaScript 和样式表。
<link rel="stylesheet" href="css/percircle.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/percircle.js"></script>2. 为百分比圆创建 html 结构。
数据百分比： 百分比值
class="blue"：内置主题。“蓝色”、“紫色”、“橙色”或“黄色”
class="深蓝色"：深色模式
class="big"：大百分比圆圈。“小”=小尺寸。空 = 中等大小
<div id="demo" data-percent="20" class="big dark blue">
</div>3.激活插件并完成。
$("#demo").percircle();4. 使用“data-text”属性自定义圆圈中间显示的文本。
<div id="demo"
data-text="Custom Text"
data-percent="70"
class="red big">
</div>5.更多的HTML数据属性来配置百分比圈。
data-animate：启用/禁用动画。默认值：真。
data-perclock：在圆圈中显示一个时钟。默认值：假。
data-perdown：在圆圈中显示倒计时。默认值：假。
data-secs：倒计时的秒数。默认值：15。
data-timeUpText：倒计时完成时显示的文本。
数据重置：点击时重置倒计时。
data-progressBarColor：背景颜色。
6. 您还可以在初始化期间将选项传递给“percircle()”方法。
$("#demo").percircle({
perdown: true,
secs: 14,
timeUpText: 'finally!',
reset: true,
// more options here
});变更日志：
2019-10-26
添加 rtl 支持
2018-03-08
修复文本跨度的垂直居中问题
修复悬停状态
2018-01-26
动态更新值时删除了 gt50 类。
2017-04-27
v1.0.20
2016-10-13
对 html/js 属性使用通用变量命名
2016-10-12
已解决：严格模式不允许在词法嵌套语句中声明函数
2016-07-19
添加倒数计时器支持
2016-07-14
RTL 支持
2016-06-06
特征/动态圆圈颜色
2016-02-15
v1.0.8：新的（和未来的）结构
2015-12-26
JS修复。
2015-10-09
固定格式
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。