使用 jQuery 和 CSS3 创建百分比圆 - percircle.js

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

• 固定格式

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码

输入验证码后可免费复制

付费复制 免费复制 付费复制

付费后30天内不限量复制

价格:元

支付宝支付

联系客服