详细信息
一个 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")
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。