如何在下一页内容完全加载之前显示加载或进度条？

Question

I only know this kind of progress bar but this is static one; how can I make it dynamic with my ajax call?

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div>

I want to show a progress bar or loading box until my next content or page loaded.

I have an HTML Table having drop-downs. When I call on any drop-down an ajax call is made and I am displaying content on the next page. My content is a HTML table but the table had some large amount of data so it took some time to load. At that time I want to show an progress bar or any loading box until my new page content fully loaded.

Here is my one page having a HTML table with drop-down

 var currentlyClickedOutlet = ""; var currentlyClickedBilldate = ""; $(document).ready(function() { $dropdown = $("#contextMenu"); $(".actionButton").click(function() { //move dropdown menu $(this).after($dropdown); //update links $(this).dropdown(); currentlyClickedOutlet = $(this).attr("data-place"); currentlyClickedBilldate = $(this).attr("data-plac"); }); }); data = [{ "amount": 476426, "billdate": "2018-09-01", "outlet": "JAYANAGAR" }, { "amount": 92141, "billdate": "2018-09-01", "outlet": "MALLESHWARAM" }, { "amount": 115313, "billdate": "2018-09-01", "outlet": "KOLAR" }, { "amount": 511153, "billdate": "2018-09-02", "outlet": "JAYANAGAR" }, { "amount": 115704, "billdate": "2018-09-02", "outlet": "MALLESHWARAM" }, { "amount": 83597, "billdate": "2018-09-02", "outlet": "KOLAR" }, { "amount": 167421, "billdate": "2018-09-03", "outlet": "JAYANAGAR" }, { "amount": 53775, "billdate": "2018-09-03", "outlet": "KOLAR" }, { "amount": 269712, "billdate": "2018-09-04", "outlet": "JAYANAGAR" }, { "amount": 58850, "billdate": "2018-09-04", "outlet": "MALLESHWARAM" }, { "amount": 82999, "billdate": "2018-09-04", "outlet": "KOLAR" } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data, divId, filterdata) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById(divId); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill_____Date"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let outletWiseTotal = {}; th = document.createElement("th"); th.innerHTML = "Total1"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); } }); grandTotal += outletWiseTotal[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = outletWiseTotal[element]; th.classList.add("text-right"); headerRow.appendChild(th); }); th = document.createElement("th"); th.innerHTML = grandTotal; th.classList.add("text-right"); // grand total headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; outlets.forEach(outlet => { let el = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); el = d.amount; } }); td = document.createElement("td"); a = document.createElement("a"); td.classList.add("text-right"); td.classList.add("dropdown"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("actionButton"); a.classList.add("btn") a.classList.add("btn-secondary"); a.classList.add("dropdown-toggle"); a.classList.add("dropdown-toggle-split"); /* a.classList.add("text-center"); */ a.setAttribute("data-place", outlet); a.setAttribute("data-plac", element); a.setAttribute("data-toggle", "dropdown"); a.innerHTML = el; td.appendChild(a); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData, 'tbl', '');

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <div id="tbl"></div> <ul id="contextMenu" class="dropdown-menu" role="menu"> <li><a href="test.jsp" class="link1 dropdown-item">BillSummary</a></li> <li><a href="test1.jsp" class="link2 dropdown-item">Item Summary</a></li> </ul>

I know Bootstrap progress bar, but how to do that dynamically?

I just want to display a progress bar or loading box until my new page loaded or want to achieve something like don't jump to the next page until the new page's content is fully loaded.

Answer 1

For an easy loading box I do this:

Add in your html

<div id="waiter"></div>

In css:

#waiter {
position: fixed;
border: 12px solid #f3f3f3; /* Light grey */
border-top: 12px solid #3498db; /* Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } }

And show/hide it when needed with display css property.

See this page for a complete tutorial.

Answer 2

You should use form events on jQuery( unload , beforeunload ) for example, you can create a function to show progress dialog like this:

function showProgress(){
      $('.progress').show();
}

and another function to hide progress dialog:

function hideProgress(){
      $('.progress').hide();
}

now bind unload , beforeunload events of forms, the below code shows progress dialog until page loaded fully(before page load and after each submit):

$(window).on("unload", function () {
    showWaiting();
});

$(window).on('beforeunload', function () {
    showWaiting();

});

for Ajax calls, before each request call showWaiting(); method and after Ajax complete event call hideProgress()

Answer 3

i did it creating a iframe with display to none, then, i put some class to each a element, cancel default behavior and load the new page in the iframe, and check the load event from that iframe, when the load is ready i replace window.location.href to the iframe location, and the navigator charge inmediatly