本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.15节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
< progress >元素是 HTML5 标准草案中新增的元素之一，在默认情况下，< progress >会生成一个和系统默认样式一样的进度条。分别在 Windows 7 和 MaxOS Lion 中的显示效果如图1-28所示。
https://yqfile.alicdn.com/c1170dc6a07d5f2f35900b6097995518969ed13b.png" >其实可以通过CSS样式来设置< progress >进度条的样式。出于一致性的考虑，在很多情况下还是想能够控制这个进度条的样式。在本实例中，以前面的实例013为基础，介绍了通过定义的CSS来控制< progress >进度条样式的过程。
具体实现
使用Dreamweaver创建一个名为“015.html”的文件，具体代码如下所示：
<html> <head> <meta charset="utf-8" /> <title>使用progress元素</title> <style type="text/css"> body { font-size:12px } p { padding:0px; margin:0px } .inputbtn { border:solid 1px #ccc; background-color:#eee; line-height:18px; font-size:12px } progress { border-radius: 2px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #aaa solid; background-color: #eee; } progress::-webkit-progress-bar { background-color: #d7d7d7; } progress::-webkit-progress-value { background-color: #aadd6a; } </style> </head> <body> <p id="pTip">开始下载</p> <progress value="0" max="100" id="proDownFile"></progress> <input type="button" value="下载按钮" class="inputbtn" onClick="Btn_Click();"> <script type="text/javascript"> var intValue = 0; var intTimer; var objPro = document.getElementById('proDownFile'); var objTip = document.getElementById('pTip'); //定时事件 function Interval_handler() { intValue++; objPro.value = intValue; if (intValue >= objPro.max) { clearInterval(intTimer); objTip.innerHTML = "恭喜你，下载已经完成！"; } else { objTip.innerHTML = "请耐心等待，正在下载中" + intValue + "%"; } } //下载按钮单击事件 function Btn_Click(){ intTimer = setInterval(Interval_handler, 100); } </script> </body> </html>通过上述代码，设置了一个个性化的< progress >进度条，在Chrome浏览器中的效果如图1-29所示。
https://yqfile.alicdn.com/6abfae6b0a922effa79f9de85db79604b6ff82a0.png" > 相关资源：敏捷开发V1.0.pptx