基于jQuery Bar Indicator 插件实现进度条展示效果


Posted in Javascript onSeptember 30, 2015

Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示、投票统计以及任务进度等诸多场景中。它使用简单、选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用。

基于jQuery Bar Indicator 插件实现进度条展示效果

查看演示 下载源码

HTML

首先加载jQuery和Bar Indicator相关js文件以及css文件。

<link href="bi-style.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery-barIndicator.js"></script>
<script src="jquery.easing.1.3.js"></script>

由于使用了动画缓冲效果,记得把easing插件也加上,您可以下载源码包,这些文件都打包好了。然后在<body>中加上HTML:

<span id="bar">55lt;/span>

看到了吧,代码中数字55表示的就是这个进度条要展示的进度,默认是100,当然这个数字也可以在插件调用时定义好。

jQuery

准备好html后,然后开始调用Bar Indicator,只要一句代码:

<script>
$('#bar').barIndicator();
</script>

是不是非常的简单,当然要满足您的项目需求的话,还需要进行一些设置,而Bar Indicator为我们提供了丰富的选项设置和事件方法调用,诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。

选项与方法

基于jQuery Bar Indicator 插件实现进度条展示效果

Bar Indicator非常强大,还有很多选项不本文就不一一列出。以上介绍就是关于基于jQuery Bar Indicator 插件实现进度条展示效果,更多内容请持续关注本站。

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 #Javascript
浅谈Javascript中substr和substring的区别
Sep 30 #Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 #Javascript
js实现创建删除html元素小结
Sep 30 #Javascript
node.js下LDAP查询实例分享
Sep 30 #Javascript
Javascript中replace()小结
Sep 30 #Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 #Javascript
You might like
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
layui实现数据分页功能
2019/07/27 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python保存字符串到文件的方法
2015/07/01 Python
python实现简易通讯录修改版
2018/03/13 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python基于WordCloud制作词云图
2019/11/29 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python 制作简单的音乐播放器
2020/11/25 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
介绍一下如何优化MySql
2016/12/20 面试题
应届生会计求职信
2013/11/11 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
开业庆典邀请函
2014/01/08 职场文书
保证书格式范文
2014/04/28 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
财务管理专业求职信
2014/06/11 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
django中websocket的具体使用
2022/01/22 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
JavaScript前端面试组合函数
2022/06/21 Javascript