jQuery 动画进度条 – jsProgressBar

jQuery 动画进度条 – jsProgressBar

版本:

浏览量:1155

最后更新:2021-09-11

应用标签:MAC 软件Jquery插件git

推荐指数:

详细信息

一个 JavaScript 库,使用纯 JavaScript 呈现动画、完全可配置的进度条。不需要 SVG、画布或图像。

特征:

  • 列和行布局。

  • 是否带有填充动画。

  • 自定义标题和标签。

如何使用它:

1. 首先在您的应用程序中包含 jsProgressBar 插件的文件。

<link rel="stylesheet" href="/path/to/src/jsProgressGauge.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jsProgressGauge.js"></script>

2. 创建一个容器来存放进度条。

<div id="example"></div>

3. 生成基本进度条,确定进度百分比值如下:

$("#example").JsProgressGauge({
  // default: 100
  value: 50
});

4. 设置进度条的方向。默认值:'line'(水平)。

$("#example").JsProgressGauge({
  // vertical
  type: 'column'
});

5. 确定是否启用填充动画。默认值:真。

$("#example").JsProgressGauge({
  animated: true,
  duration: 1000
});

6.自定义进度条的外观。

$("#example").JsProgressGauge({
 
  // show label
  showLabel: true,
 
  // show title
  showTitle: true,
 
  // custom title here
  title: '',
   
  // unit
  labelUnit: '%',
   
  // background color
  fillBackgroundColor: '#3498db',
  backgroundColor: '#EEEEEE',
 
  // border-radius
  barRadius: 4,
  fillRadius: 0,
 
  // left,center or right
  labelAlignment: 'right',
 
  // top,center or bottom
  labelPosition: 'top',
 
  // font size
  labelFontSize: 14,
  titleFontSize: null,
 
  // text color
  labelColor: '#000',
  titleColor: '#000',
   
  // bar height
  barHeight: '15px',
  fillSize: '15px',
 
  // width
  width: '100%',
 
  // bold labels
  boldLabels: false,
 
  // rotate labels
  rotateLabels: false
   
});

7.使用自定义功能自定义标签。

$("#example").JsProgressGauge({
 
  labelFormatter: function(percent, htmlDisplayElement){
    // ...
  }
 
});

8. 进度完成时触发功能。

$("#example").JsProgressGauge({
 
  onFinish: () => alert("Gauge: Loading Finished")
 
});
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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