How to show loading or progress bar until the next page content fully loaded?

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.

Possible duplicate of [How to show loading spinner in jQuery?](https://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) — Smollet777, Dec 06 '18 at 10:57
@Smollet777 i have tried bootstrap progress bar but don't know how could i makethat dynamic — manish thakur, Dec 06 '18 at 10:58

score 0 · Answer 1 · edited Dec 28 '18 at 20:00

0

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.

edited Dec 28 '18 at 20:00

halfer

18,701
13
79
158

answered Dec 06 '18 at 13:34

hunB

140
1
11

how can i add this to my ajax call. like after click loader should come and be there until new page loaded – manish thakur Dec 07 '18 at 05:02
as you are using Jquery you can use `$("#waiter").show()` on the click event, and `$("#waiter").hide()` when the ajax is done – hunB Dec 07 '18 at 08:03

score 0 · Answer 2 · answered Dec 06 '18 at 13:51

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()

set your css for `.progress` class as flow: `.progress { background-color: rgba(238,238,238, 0.5) !important; display: none; z-index: 99999999; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: #eee; overflow: hidden; text-align: center; }` — Ali Mardan, Dec 07 '18 at 14:29

score 0 · Answer 3 · answered Jun 22 '20 at 20:43

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

How to show loading or progress bar until the next page content fully loaded?

3 Answers3