title: 加载进度条 date: 2015-09-17 11:25:43 tags: other category: javascript
动画写的好，一定要css写得多，看着一个动画，就能看出来它的结构，有了结构，js就好写了，下面是一个进度条
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>进度条</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.progress-bar {
width: 400px;
height: 20px;
background: #e4e4e4;
border-radius: 10px;
margin: 0 auto;
margin-top: 200px;
}
.progress-highlight {
background: #60baff;
border-radius: 10px;
height: 20px;
display: block;
width: 0%;
}
</style>
<body>
<p class="progress-bar">
<span class="progress-highlight"></span>
</p>
<script>
var ph = document.querySelectorAll('.progress-highlight')[0];
var s = 0;
(function phfun(){
s = s + 5;
if (s <= 100) {
setTimeout(function () {
ph.style.cssText = 'width:' + s + '%';
phfun()
}, 100);
return
}
alert('加载成功');
})()
</script>
</body>
</html>
