Progress

这个标签用来表示进度，常用来表示下载的进度。

<progress value="22" max="100"></progress>

  默认的样式就是这样，这个样式是可以修改的。

value：当前值

max:最大值 

当前值/最大值=当前的比例（就是进度了）

 

一个上传显示进度的小案例：   我这里用的是表单的异步上传    文件上传---利用表单提交

  #myProgress
        {
            background: ghostwhite;        
            width: 200px;
            height: 30px;
            -webkit-appearance: none;
        }
        ::-ms-fill                          //针对不同的浏览器做的处理
        {
            background: dodgerblue;
        }
        ::-moz-progress-bar
        {
            background: dodgerblue;
        }
        ::-webkit-progress-bar         //全部的（整个进度条）
        {
            background: ghostwhite;
        }
        ::-webkit-progress-value       //已完成的样式
        {
            background: dodgerblue;
        }
        

HTML:

JS：   一些参数的解释在上面说的那篇文章里面有解释。

  $("#myform").ajaxSubmit({
                    beforeSubmit: function (formData, jqForm, options) {    //开始之前
                        $("#myProgress").show();
                        $("#per").show();
                    }, uploadProgress: function (event, position, total, percentComplete) {   //显示进度的
                        $("#myProgress").val(percentComplete);
                        $("#per").text(percentComplete + "%");
                    },
                    success: function (data) {                       
                        $("#myProgress").hide();
                        $("#per").hide();                       
                    },
                    error: function (data, status, e) {
                        $("#myProgress").hide();
                        $("#per").hide();
                        NewAlertBox('ERROR', '上传失败！', 2000);
                    },
                    url: "/tool/upload_ajax.ashx",
                    type: "post",
                    dataType: "json",
                    timeout: 60000
                });

效果：（这是我上传的过程中截的图）