用js写进度条

 先写出基本结构

<div id="wrapper">
	<span>点击开始加载</span>
	<div id="box">
	</div>
</div>

 效果如图：

 写出css样式

*{
				margin: 0;
				padding: 0;
			}
			#wrapper{
				width: 800px;
				height: 50px;
				border: 2px solid #333;
				border-radius: 25px;
				line-height: 50px;
				text-align: center;
			}
			#box {
				text-align: center;
				height: 50px;
				width: 0px;
				line-height: 50px;
				background-color: #008000;
				border-radius: 25px;
				float: left;
			}

 js实现功能：

var _wrapper = document.querySelector("#wrapper");
			var _box = document.querySelector("#box");
			var num=0;
			var b;
			// 点击触发读条
			_wrapper.onclick = function() {
				_wrapper.firstElementChild.innerText = "";
					b = setInterval("wi()",1);
			}
			利用计时器实现进度条加载
			function wi() {
				if (num >= 100) {
					clearInterval(b);
					_box.innerText = "加载完成";
					return
				}
				_box.style.width = num + "%";
				num+=0.1;
				_box.innerText = parseInt(num)+"%";
			}

效果如图：