首页 > 代码库 > JQ加载进度条动画

JQ加载进度条动画

2024-09-23 18:38:13   218人阅读

<!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="http://www.mamicode.com/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加载进度条动画


联系
我们