实现进度条效果

HTML5 中可以使用progress标记元素实现进度条效果。
progress是HTML5中新增的状态交互元素，用来表示页面中的某个任务完成的进度。展示进度条的效果可以使用整数，也可以使用百分比。
属性信息：
max 定义完成的值
value 定义进程的当前值

补充：
1.需要结合JavaScript脚本语言来动态显示下载的进度。
2.表示度量衡（例如，磁盘空间使用情况或查询结果）一般用meter标签。

浏览器支持：Chrome， Firefox, Opera, Internet Explorer 10以及 Safari 6 支持 progress 标签，Internet Explorer 9 以及更早的版本不支持。

实例代码如下：

<p id="p1">开始下载</p>    <progress value="0" max="100" id="proDownFile"></progress>    <input type="button" value="点击下载" onclick="download();">    <script>        var intValue = 0;        var Timer;        var oPro = document.getElementById("proDownFile");        var oP = document.getElementById("p1");        //下载按钮单击事件        function download(){            Timer=setInterval(function(){                intValue++;                oPro.value=intValue;                if (intValue >= oPro.max) {                clearInterval(Timer);                oP.innerHTML = "下载已经完成!";            } else {                oP.innerHTML = "请耐心等待，正在下载中" + intValue + "%";            }            },100);        }    </script>

还可以通过CSS样式来设置progress进度条的样式，来使进度条在不同浏览器中显示效果一致。