实现进度条效果

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进度条的样式，来使进度条在不同浏览器中显示效果一致。