进度条

[JQqingFirst]

<style type="text/css"> .progressBar { width: 200px; height: 8px; border: 1px solid #98AFB7; border-radius: 5px; margin-top: 10px; } #bar { width: 0px; height: 8px; border-radius: 5px; background: #5EC4EA; } </style>

	<script type="text/jscript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		function progressBar() {
			//初始化js进度条
			$("#bar").css("width", "0px");
			//进度条的速度，越小越快
			var speed = 5;

			bar = setInterval(function() {
				nowWidth = parseInt($("#bar").width());
				//宽度要不能大于进度条的总宽度
				if(nowWidth <= 200) {
					barWidth = (nowWidth + 1) + "px";
					$("#bar").css("width", barWidth);
				} else {
					//进度条读满后，停止
					clearInterval(bar);
				}
			}, speed);
		}
	</script>