基于jQuery Bar指示器插件的进度条显示效果的实现

Bar Indicator是一个基于jQuery的显示进度条数据的插件，可用于数据统计显示、投票统计、任务进度等多种场景。使用简单，选项丰富，基于进度条几乎可以满足用户的所有WEB设计需求。本文将举例说明条形指示器的使用。

查看演示下载源代码。

超文本标记语言

首先加载与jQuery和Bar Indicator相关的js文件和css文件。

link href='bi-style.css' rel='样式表'/Script src=' http : jquery . min . js '/Script Script src=' http : jquery-barindicator . js '/Script src=' http : jquery . easy . 1 . 3 . js '/Script，因为使用了动画缓冲效果，记得添加easy插件，可以下载源代码包，这些文件都打包好了。然后在正文中添加HTML:

复制代码如下：span id=' bar ' 55lt/span

看，代码中的数字55表示这个进度条要显示的进度，默认值是100。当然，这个数字也可以在调用插件时定义。

jQuery

准备好html后，开始调用Bar Indicator，就一个代码：

脚本$('#bar ')。barIndicator()；/script当然不是很简单，要想满足你的项目需求，需要做一些设置，而Bar Indicator为我们提供了丰富的选项设置和事件方法调用，比如水平/垂直进度条、进度条颜色、数值显示、进度数值获取和重置等。

选项和方法

Bar Indicator非常强大，有很多选项在本文中不会列出。以上介绍的是基于jQuery Bar Indicator插件的进度条显示效果。更多信息，请持续关注本网站。