网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款完全可配置的jquery进度条插件,无需SVG、画布或图像。
特征:
行和列布局
是否使用动画填充
自定义标题和标签
使用方法:
1.首先在应用程序中包含jsProgressBar插件的文件。
<link rel="stylesheet" href="jsProgressGauge.css" />
<script src="jquery.min.js"></script>
<script src="jsProgressGauge.js"></script>
2.创建一个容器来保存进度条。
<div id="example"></div>
3.生成基本进度条并确定进度百分比值,如下所示:
$("#example").JsProgressGauge({
// default: 100
value: 50
});
4.设置进度条的方向。默认值:“line”(水平)。
$("#example").JsProgressGauge({
// vertical
type: 'column'
});
5.确定是否启用填充动画。默认值:true。
$("#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")
});
转载请注明来源:jquery横向/纵向百分比动画进度条效果代码
本文永久链接地址:https://www.moyouyouw.cn/code/760.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论