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

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

版本:

浏览量:1361

最后更新:2021-09-12

应用标签:gitJquery插件MAC 软件

推荐指数:

详细信息

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天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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