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

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

首先加载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为我们提供了丰富的选项设置和事件方法调用,诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。

 

选项与方法

 

参数 描述 默认值
data 如果是false,则会读取html中目标元素中的值,否则将使用data定义的数值。 false
style 设置进度条样式,有水平(horizontal)和垂直(vertical)两种。 horizontal
animation 是否启用进度条加载动画,true/false true
foreColor 设置已完成的进度的颜色,默认false则读取的是css中的设置。 false
backColor 设置整个进度条的背景色,默认false则读取的是css中的设置。 false
horTitle 设置进度标题,如“已完成”。 false
numType 设置数值展示样式,默认percent即百分数,也可以将数值设置为absolute,则不带‘%’ percent
numMin 进度最小值。 0
numMax 进度最大值。 100
vertBarWidth 垂直进度条的宽度。 10
horBarHeight 水平进度条的高度。 10
vertBarHeight 设置垂直进度条的高度。可以设置为如:'line','18px','150%' line
milestones 是否显示进度条上的刻度,默认在进度条上50%的位置会有一条线隔开。 true
方法
loadNewData 加载新数据。比如用户重新输入数据后,调用此方法进度条会发生变化。
var data = 85; //Any number
$('.myElement').barIndicator('loadNewData', [data]);
getPluginData 获取进度数据。
$('.myElement').barIndicator();
//Call the getter and store it's value to a variable var storedData = $('.myElement').barIndicator('getPluginData');
console.log(storedData.barLength);

 

Bar Indicator非常强大,还有很多选项不本文就不一一列出,详情可以关注Bar Indicator项目官网:https://github.com/kapantzak/barIndicator。

时间: 2024-10-29 12:01:19

基于jQuery Bar Indicato的进度条展示特效代码的相关文章

基于jQuery页面顶部折角图片撕开特效代码

效果如下   源码  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

jquery实现加载进度条提示效果_jquery

本文实例讲述了jquery实现加载进度条提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script type="text/javascript" src="http://lib.sinaapp.co

jquery实现select下拉框美化特效代码分享_javascript技巧

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

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

Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示.投票统计以及任务进度等诸多场景中.它使用简单.选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用. 查看演示 下载源码 HTML 首先加载jQuery和Bar Indicator相关js文件以及css文件. <link href="bi-style.css" rel="stylesheet" />

jquery实现模拟百分比进度条渐变效果代码_jquery

本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script

VB.NET进度条的方法代码_实用技巧

1.创建进度条: 复制代码 代码如下: <DIV id="Lay1" style="Z-INDEX: 1; LEFT: 1%; VISIBILITY: hidden; WIDTH: 99%; CURSOR: crosshair; POSITION: absolute; TOP: 32px; HEIGHT: 95%; BACKGROUND-COLOR: #ffffff"><FONT face="宋体"></FONT&g

BootStrap Progressbar 实现大文件上传的进度条的实例代码_javascript技巧

1.首先实现大文件上传,如果是几兆或者几十兆的文件就用基本的上传方式就可以了,但是如果是大文件上传的话最好是用分片上传的方式.我这里主要是使用在客户端进行分片读取到服务器段,然后保存,到了服务器段读取完了之后将分片数据进行组合. 2.前端代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Htm

线程-C#进度条能否根据代码的执行进度来加载进度?

问题描述 C#进度条能否根据代码的执行进度来加载进度? 我在网上搜索了下资料,大部分都是使用Timer控件或者线程来进行,但是最终都是根据计算结果来写出一个MaxValue和一个Value来计算并且填充进度条 但是计算的话总感觉不是很准确,我如今遇到了一个比较棘手的难关(对于我而言),有个界面的树在读取数据库进行绑定的时候会显得非常慢,但是设定进度条的时间长短根本无法确定,以及代码例如(链接TCP之类的)断开链接也会产生卡主的状况,但是由于线程的关系,进度条依然显示完毕了. 使得我非常的头疼,因

基于jQuery实现仿QQ空间送礼物功能代码_jquery

我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人.我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!! 如下图所示: 单击其中的一个礼物,就会马上送出去.但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示: 怎么实现那上面的功能呢? 就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框. 网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件. jquery中tips的有很多插件,