A-A+

基于jQuery Bar Indicato的进度条展示特效代码

2016年01月12日 web前端设计 暂无评论 阅读 6 views 次

进度条效果通常使用js实现不过现在的jquery插件越做越强大了,我们找到一款基于jQuery Bar Indicato插件可以直接制作成进度条了,下面来看看。

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

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

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

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

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

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

jQuery

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

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

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

标签:

给我留言