<!DOCTYPE html>

<html>

<head>

<meta charset="utf8" />

<title>progressbar</title>

<style type="text/css">

   #divprogressbar{

   	width:300px;

   	height:30px;

   }

   .progress-label{

   	float:left;

    margin-left:40%;

    margin-top:3px;

   }

</style>

<link  rel="stylesheet" href="css/jquery-ui-1.10.4.min.css"  media="screen"/>

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>

</head>

<body>

<div id="divprogressbar"><div class="progress-label">loading...</div></div>

<script type="text/javascript">

   $(function(){

	 //  var val=0;

	   $('#divprogressbar').progressbar({value:0});

	   $('#divprogressbar').progressbar({

		   value:0,

		   change:function(){

			   $(".progress-label").text($("#divprogressbar").progressbar("value")+"%");

		   },

	       complete:function(){

	    	   $(".progress-label").text("Complete!");

	       }

		});

       function progress(){

	   var val= $('#divprogressbar').progressbar("value") || 0;

	   $('#divprogressbar').progressbar("option","value",val+1);

	   if(val<99)

	   {

	   setTimeout(progress,100);

	   }

       }

       setTimeout(progress,1000);

   }

  );

</script>

</body>

</html>

　　

查看文档：http://jqueryui.com/progressbar/

jquery-ui 进度条的更多相关文章

  1. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  2. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

  3. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  5. jquery自定义进度条与h5原生进度条

      介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...

  6. jquery 圆形进度条

    最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...

  7. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  8. bootstrap与jQuery结合的动态进度条

    此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...

  9. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  10. Unity跳转场景进度条制作教程(异步加载)

    Unity跳转场景进度条制作 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

随机推荐

  1. （巨坑）改了tpl文件之后，前端效果没反应

    通常前端修改很小的部分代码,并不会立即显示出效果.比如,原来是 ,修改后是 虽然只是加多了一个函数,但是作用很大,这种情况下,可能是由于浏览器缓存的原因,修改后的代码没有被重新加载.这个时候,只需要在 ...

  2. HtmlHelper—DropDownList：SelectList、SelectListItem

    前言 在项目中经常使用到DropDownList来显示数据库中的数据,典型的例子为为某书籍选择所属类型. 使用SelectList来实现: 实现一: Controller 代码 SelectList ...

  3. centos ssh配置使用

    配置 数据阶梯 CentOS SSH配置 默认CentOS已经安装了OpenSSH,即使你是最小化安装也是如此.所以这里就不介绍OpenSSH的安装了. SSH配置: 1.修改vi /etc/ssh/ ...

  4. ARM安装ROS- indigo

    Ubuntu ARM install of ROS Indigo 溪西创客小屋 There are currently builds of ROS for Ubuntu Trusty armhf. T ...

  5. 【STL】-迭代器的用法

    初始化: list<char>::iterator pos; 算法: 1. 遍历 for(pos = col1.begin(); pos != col1.end(); ++pos){... ...

  6. Controller方法的返回值

    方法的返回值1.ModelAndView这个就不多说,这是最基础的,前面定义一个ModelAndView,中途使用addObject方法添加属性,再返回.视图解析器会自动扫描到的.2.String这个 ...

  7. 乌龟棋（noip2010）

    分析:该题是经典的动态规划题目. 题目中涉及到卡片数.卡片分4类.格子数等若干信息,又每张卡片仅能使用一次.求到达终点最多能能获得多少分. 从题目中可知卡片的使用顺序影响最终得分,我们可知状态转移和使 ...

  8. 《day10》

    //65-面向对象-接口-接口的思想 /* 举例:笔记本电脑. 1,接口的出现对功能实现了扩展. 2,接口的出现定义了规则. 3,接口的出现降低了耦合性.(解耦) 接口的出现完成了解耦,说明有两方,一 ...

  9. iOS 三种录制视频方式

    随着每一代 iPhone 处理能力和相机硬件配置的提高,使用它来捕获视频也变得更加有意思.它们小巧,轻便,低调,而且与专业摄像机之间的差距已经变得非常小,小到在某些情况下,iPhone 可以真正替代它 ...

  10. PED结构获取进程路径和命令行地址

    1.FS寄存器 2.进入FS寄存器地址,7FFDD000 3.偏移30为PED结构 4.偏移地址10 3C,44偏移:路径地址,命令行地址 // 通过PEB结构去查找所有进程模块 void *PEB ...