CSS 动态进度条效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.xxxxxxxxxx.com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">   
 i=0;   
 function startbar(){   
  showbar=setInterval("setbar()",500);      
 }   
 function setbar(){
  i+=5;       
  if(i>=100){
   clearInterval(showbar);          
  }       
  document.getElementById("bar").style.width=i+"%";       
  document.getElementById("bar").innerHTML=i+"%";   
 }
</script>
<link  type="text/css" href="yang.css"  rel="stylesheet"/>
<title>CSS 进度条</title>
</head>

<body onload="startbar();">   
 <div id="loadbar">       
  <strong id="bar" style="width:30%">30%</strong>   
 </div>
</body>
</html>

 

 

样式

#loadbar{   
 width:280px;   
 background-color:#000;   
 border:1px solid #000;   
}
#bar{   
 display:block;   
 font-family:Arial,
 Helvetica, sans-serif;   
 font-size:12px;   
 background-color:#00d0ff;   
 text-align:center;   
}

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。