进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成pc端了，进度条的快慢速度和样式可自行调节，改动也是很方便的，不多说，看代码：
<style>
* {
margin:;
padding:;
} html, body {
font-family: arial, "microsoft yahei";
font-size: 14px;
background: #c2d7ac;
} .progress {
width: 300px;
height: 30px;
margin: auto;;
background: #70b4e5;
border-radius: 5px;
-webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
} .progress_bar {
width: 0%;
height: 26px;
background: url("images/bar.jpg") repeat;
background-size: auto 100%;
border-radius: 5px;
position: relative;
left: 3px;
right: 3px;
top: 2px;
} p {
width: 300px;
text-align: center;
font-size: 14px;
color: #c20606;
position: absolute;
top: 98px;
}
</style>
<body onload="fakeProgress(0, load)">
<div style="height: 120px;"></div>
<div class="progress">
<div id=load>
<div class="progress_bar"></div>
<p>0</p>
</div>
</div>
<script type="text/javascript">
function setLOAD(v, el) {
var read = (document.all && document.getElementsByTagName);
if (read || document.readyState == "complete")
valueEl = el.children[1];
{
filterEl = el.children[0];
valueEl.innerText = v + "%";
filterEl.style.width = v + "%"; }
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "begin.html";
else {
setLOAD(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 2000);
}
}
</script>
效果图：