HTML 5 进度条

.pro progress{
			-webkit-appearance:none;
		}
		.pro ::-webkit-progress-bar{
			border:1px solid cyan;
			border-radius: 4px;
		}
		.pro ::-webkit-progress-value{
			background-color: #34538b;
		}
		.pro ::-moz-progress-bar{
			background: #34538b
		}
		.pro ::-ms-fill{
			background: #34538b
		}

<section class="pro">
		<progress>
			进度条用于表示某个任务的完成程度,比如文件下载,文件下载到本地的进度值可以
			使用1-100的值,也可以百分比
		</progress>
		<p id="pTip">开始下载</p>
		<progress value="0" min="0" max="1024" id="proDownFile"></progress>
		<input type="button" value="下载" id="btn">
	</section>

	<script>
		var num = 0;
		var timer = null;
		btn.onclick = function(){
			timer = setInterval(function(){
				num++;
				if (num > 1024) {
					clearInterval(timer);
					pTip.innerHTML = '下载完成';
				}else{
					pTip.innerHTML = '已下载'+Math.ceil(num / proDownFile.max * 100)+'%';
				}
				proDownFile.value = num;
			},10)
		}
	</script>