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

Bar Indicator是一款基于jQuery的进度条数据展示插件，它可应用于数据统计展示、投票统计以及任务进度等诸多场景中。它使用简单、选项丰富，几乎可以满足用户所有基于进度条的WEB设计需求，本文将结合实例给大家讲解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为我们提供了丰富的选项设置和事件方法调用，诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。

选项与方法

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

赞 (0)

相关推荐

  • Android改变ExpandableListView的indicator图标实现方法

    本文实例讲述了Android改变ExpandableListView的indicator图标实现方法.分享给大家供大家参考,具体如下: 1)定义xml文件先,命名为expand_list_indicator.xml <?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"&

  • iOS中UIActivityIndicatorView的用法及齿轮等待动画实例

    iOS中UIActivityIndicatorView的用法及齿轮等待动画实例

    基础 @派生自UIView,所以它是视图,也可以附着在视图上. 一.创建 复制代码 代码如下: // 因为UIActivityIndicatorView的大小是固定的,可以直接设置它.center UIActivityIndicatorView* activityIndicatorView = [ [ UIActivityIndicatorView alloc ] initWithFrame:CGRectMake(250.0,20.0,30.0,30.0)]; 二. 属性设置风格 复制代码 代码

  • Android ViewPager制作新手导航页(动态加载)

    Android ViewPager制作新手导航页(动态加载)

    我们来讲个老生常谈的话题,估计大家都用过的->ViewPager,用它来做新手导航页面,虽然这次也是讲这个,但是和以往的用法可能有些不同,大家都看到标题进来的,应该知道的是:动态加载指示器. 什么叫动态加载呢,是不是感觉很高大上呢,其实呢就是动态的去加载指示器的数量的,而不是在布局文件中写死.希望看了这篇文章大家对ViewPager有新的认识. 看到这个效果大家应该都很不屑吧,今天讲这个就是为了让大家有新的认识.好了,好好听,开始了. 这个动态加载就是为了动态的加载下面的灰色圆点指示器和红色圆点

  • Android 利用ViewPager+GridView实现首页导航栏布局分页效果

    Android 利用ViewPager+GridView实现首页导航栏布局分页效果

    最近我尝试使用ViewPager+GridView实现的,看起来一切正常,废话不多说,具体代码如下: 如图是效果图 首先分析下思路 1.首先是怎么布局:整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中,下方是圆点 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • Android 中 TabHost与ViewPager结合实现首页导航效果

    Android 中 TabHost与ViewPager结合实现首页导航效果

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就不过多解释了,说几点需要注意的问题 1:TabHost .TabWidget.FrameLayout一定添加id这个属性,否则会报错 android:id="@android:id/tabhost" android:id="@android:id/tabcontent"

  • android实现ViewPager的Indicator的实例代码

    android实现ViewPager的Indicator的实例代码

    虽然在android5.0中design中有了TabLayout来实现ViewPager的Indicator,简单好用.但这个是我自己实现的,学习了很多,记录在这里.效果图: 第一步 新建一个类继承LinearLayout,用来绘制指示器,及提供Viewpager滑动时重绘指示器的方法: public class ViewPagerIndicator extends LinearLayout{ //画笔 private Paint mPaint; //用来画一条线 private Path mP

  • 教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)

    教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)

    1.概述 今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过TabPageIndicator,并且很多知名APP都使用过这个开源的指示器.大家有没有想过如何自己去实现这样的一个指示器,并且代码会有多复杂呢~~~ 今天,我就带领大家来从无到有的实现这样一个指示器,当然了,不准备一模一样,搞得没有创新似的,再看标题,跟MIUI相关,所以我们准备做一个特性与TabPageIndicator一致的,但是样子和MIUI的Tab一样的~~

  • Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

  • Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）

    Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）

    Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结.目前写了: 1.传统的ViewPager实现 2.FragmentManager+Fragment实现 3.ViewPager+FragmentPagerAdapter实现 4.TabPageIndicator+ViewPager+FragmentPagerAdapter 1.传统的ViewPager实现 主要就是ViewPager+ViewAdapter这个还是比较常见的,就不多说了 效果图: 代码: p

  • Android动态给ViewPager添加Indicator导航

    Android动态给ViewPager添加Indicator导航

    先看下效果 小圆点的形状和颜色都是可以自己定义的,看需求 首先第一步,滑2个圆点,一个是选中后的圆点,一个是未选中的圆点,看选中的圆点shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > &l

随机推荐