JQ加载进度条动画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ加载进度条动画相关的知识，希望对你有一定的参考价值。

<!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加载进度条动画的主要内容，如果未能解决你的问题，请参考以下文章

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

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

动画进度条以显示网页的进度

肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！

iOS 进度条加载安装动画 —— HERO博客

用于 onActivityCreated 中通用图像加载器的片段中进度条的 NullPointerException