<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		.box{

			border-radius: 4px;

			height: 8px;

			width: 100px;

			background: #ebebeb;

			position: relative;

		}

		.box .line{

			/*width: 20%;*/

			background: orange;

			height: 100%;

			border-radius: 4px;

			text-indent: 999px;

		}

	</style>

</head>

<body>

	<div class="numb">20</div>

	<div class="box">

		<div class="line" data-load="50"></div>

	</div>

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

	<script type="text/javascript">

		var step = 1,  //加载基数

			status = 100, //加载步骤数

			$line = $('.line'),

			$lineVal = $line.text(),

			$attrVal = $line.data('load'),  //进度条属性值

			$number = parseInt($('.numb').text()),

			$numberVal = parseFloat($number / status);  //进度数值

		$line.css('width',$lineVal + '%');  //出事进度值

		function watchFn() {

			var self = $(this);

			var showVal = $attrVal / status;

			var numberHtml = parseInt($numberVal * step);

			//数值小于10让其显示小数点后面一位

			if($number < 10) {

				numberHtml = parseFloat($numberVal * step).toFixed(1);

			}

			//设置进度条、进度数值的样式/内容

			$line.css('width',showVal*step + '%');

			$('.numb').html(numberHtml);

			//基数大于步骤数清空定时器

			if(step >= status) {

				clearInterval(timer);

			}

			step += 1;

		}

		//定时器，每个步骤15毫秒

		var timer = setInterval(watchFn, 15);

	</script>

</body>

</html>

　　

JQ加载进度条动画的更多相关文章

  1. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  2. 【Demo】CSS3 动画 加载进度条

    实例结果图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. bootstrap课程9 bootstrap如何实现动画加载进度条的效果

    bootstrap课程9 bootstrap如何实现动画加载进度条的效果 一.总结 一句话总结:在bootstrap进度条的基础上添加js(定时器),动态的改变进度条即可.很简单的. 1.路径导航是什 ...

  4. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  5. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  6. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  7. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  8. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  9. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

随机推荐

  1. Wing IDE 怎样设置 python版本号

    机器上同一时候装了Python3和Python2,使用Wing IDE, 由于Python2和3是有非常大的差别的,所以时不时的须要更改IDE使用的Python版本号.以下介绍方法: 1.打开Edit ...

  2. CCFlow的excel数据源导入Dtl明细表的操作方法以及模版demo

    CCBPM支持通过excel向Dtl明细表(从表)导入数据. 以下,我们以cc的財务报销单demo流程解说详细的操作步骤和模版设计. 导入的操纵步骤: 1.流程发起后,在開始节点导入数据源,点击明细表 ...

  3. caffe中lenet_train_test.prototxt配置文件注解

    caffe框架下的lenet.prototxt定义了一个广义上的LeNet模型,对MNIST数据库进行训练实际使用的是lenet_train_test.prototxt模型. lenet_train_ ...

  4. rsync来传输文件(可断点续传)

    scp传文件的话如果出错就得重新来过, 用rsync可以实现断点上传的功能   大概就是这样用:  rsync -P --rsh=ssh home.tar 192.168.205.34:/home/h ...

  5. 「JavaSE 重新出发」02.02 引用数据类型

    引用(复合)数据类型 1. 枚举类型 例: 枚举类型 Size 的声明: enum Size { SMALL, MEDIUM, LARGE, EXTRA_LARGE }; 声明 Size 类型变量: ...

  6. maven/ssm框架搭建

    好久没有写java了,昨天学了下maven,不用手动的下载和添加jar包,实在是太方便. ------------------------------------------------------- ...

  7. NYOJ 16 矩形嵌套【DP】

    解题思路:呃,是看的紫书上面的做法,一个矩形和另一个矩形之间的关系就只有两种,(因为它自己是不能嵌套自己的),可嵌套,不可嵌套,是一个二元关系,如果可嵌套的话,则记为1,如果不可嵌套的话则记为0,就可 ...

  8. （2016北京集训十）【xsy1529】小Q与进位制 - 分治FFT

    题意很简单,就是求这个数... 其实场上我想出了分治fft的正解...然而不会打...然后打了个暴力fft挂了... 没啥好讲的,这题很恶心,卡常卡精度还爆int,要各种优化,有些dalao写的很复杂 ...

  9. NOIp2018模拟赛三十三

    神奇的一场... 成绩:100+0+14=114 A题是个体面很恐怖的题...然而看懂题意之后转化一下就变成了一道暴力傻逼题...但是不知道为什么dalao们都没写,讲题的时候挺尴尬的...yrx“瞄 ...

  10. NuSOAP简介 php中使用webservice

    许多机构已经采用了Apach和PHP作为他们的Web应用环境.在Web services模式中采用PHP可能看上去可能会比较难.但是事实上,搭配NuSoap,你可以轻松的应用PHP构建SOAP的客户端 ...