Html 5 进度条展示

.progress {  
  border: 0; 
  background-image: none !important;
  filter: none !important;
  -webkit-box-shadow: none !important;
     -moz-box-shadow: none !important;
          box-shadow: none !important;   

}

进度条 html  放到显示的地方
 <div class="progress progress-striped active" style="display: none; height: 7px; margin-top: 5px; margin-bottom: 10px">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%; height: 7px">
                </div>
            </div>

注释的是第一种方式 url  然后load 
第二种方式就是ajax 这样 beforeSend 去吧进度条加载出来 成功后隐藏

function SearchPromotion() {
    var keyword = $("#txtKeywords").val().trim();
    var fromDate = $("#txtFromDate").val();
    var toDate = $("#txtToDate").val();
    var dateType = $("#sltDateType").val();
    var key = $("#hidAdminKeyStr").val();
    var ConfirmationID = $("#txtConfirmationID").val();
    //var url = "/AffordableWorld/PackageInfo/GetPromotion" + key + '&menuId=' + $('#hidMenuId').val();
    var url1 = key + '&menuId=' + $('#hidMenuId').val();
    if (keyword != null && keyword != "") {
        url1 += "&keyword=" + keyword;
    }
    if (fromDate != null && fromDate != "") {
        url1 += "&from=" + fromDate;
    }
    if (toDate != null && toDate != "") {
        url1 += "&to=" + toDate;
    }
    if (ConfirmationID != null && ConfirmationID != "") {
        url1 += "&confirmationid=" + ConfirmationID;
    }
    url1 += "&datetype=" + dateType;
   
    //$("#tbPromotion").load(encodeURI(url), function () {
    //    setTimeout(function () { $('.progress').hide(); }, 500);
    //    App.init();
    //});

    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();

            // Download progress
            xhr.addEventListener("progress",
                function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;                        
                        console.log(percentComplete);
                    }
                },
                false);

            return xhr;
        },
        url: '/AffordableWorld/Reservation/GetPromotion',
        type: 'GET',
        data: url1,
        beforeSend: function() {
            $('.progress-bar').css('width', '15%');
            $('.progress').show();
        },
        success: function(result) {
            $('.progress-bar').css('width', '100%');
                
            $('#tbPromotion').html(result);

            setTimeout(function() { $('.progress').hide(); }, 500);
        }
    });
}