loading/progess.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	 
		.oy-out-box {
			position: relative;
			width: 80%;
			height: 10px;
			margin: 0 auto;
			border-radius: 5px;
			background-color: #f5f5f5;
		}

		.oy-in-box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			height: 100%;
			border-radius: 5px;
			background-color: green;
			text-align: right;
			font-size: 12px;
			line-height: 10px;
			color: #fff;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
	<div class="oy-out-box">
		<div id="prog-bar" class="oy-in-box"></div>
	</div>
	<script>
		$(document).ready(function(){
			var innerBox = $('#prog-bar'),
			    complete = 0,
			    speed = 500,
			    timerId;

			function progess(per){
				//console.log(per,timerId)
				if(per > 100){
					clearTimeout(timerId);
					innerBox.css('text-align','center')
					return false;
				}

				innerBox.animate({width:per + '%'},speed,'linear',function(e){
					innerBox.text(per+'%');
				});
				timerId = setTimeout(function(){
					//ajax success callback
					progess(per+10)
				},speed)
			}

			progess(complete)
		})
	</script>
</body>
</html>