как показать загрузку CSS при вызове ajax по событию click

Question

У меня есть кнопка раскрывающегося списка в моей html-таблице, и у нее есть 2 ссылки при нажатии на ссылку1. Я пересылаю на новую страницу, где я делаю вызов ajax, чтобы показать данные в таблице HTML, но эти данные в большом размере.количество, так что я пытаюсь добиться, чтобы показать загрузчик CSS, пока данные не загружены полностью

вот мой код, который имеет кнопку раскрывающегося списка и загрузчик CSS.я хочу щелкнуть ссылку, чтобы показать загрузчик и отобразить таблицу HTML в фоновом режиме, чтобы никто не мог щелкнуть или изменить таблицу до тех пор, пока не загрузится новая страница

 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"); 
	        
	      });
      
  
      $('.loader').hide();
				 
				 $('.link1').click(function (e) {
				  
				   $('.loader').show();
				 });
    
    

    
     
    });

    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', '');
                 

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  
  animation: spin 2s linear infinite;
}



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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/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://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

  <div class="loader"></div>   <!-- this will show the loader  -->




  
 <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">Category wise Summary</a></li>
    </ul>

после нажатия на ссылку одного из приведенных выше фрагментов я перехожу на новую страницу, где я выполняю ajax-вызов для получения данных.

я хочу показать загрузчик CSS после нажатия на ссылку 1 до полной загрузки новой страницы, а затем скрыть его после полной загрузки новой страницы

моей другой страницы, где я делаюajax-вызов

здесь я помещаю статические данные в виде JSON, чтобы каждый мог попробовать мой код, но в своем коде я сделаю ajax-вызов

/* i will makeajax call in place of json like this   
                      
                       $.ajax({
		url : "TestServlet",
		method : "GET",
		dataType : "json",
	    contentType: "application/json; charset=utf-8",
		data : {
			   fromdate : $("#startdate").val(),
               todate : $("#enddate").val(),
	           outlet : $("#all").val()
	           
			 },
			 
		success : function(tableValue) {
			
        console.log("test",tableValue);
     
         addTable(tableValue)
		
			
				
		}
			 
	});
                      
                      */


var tableValue=[
	               
	                  
	                  {
	                    "BILLNO": "D22364",
	                    "AMOUNT": 79,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22365",
	                    "AMOUNT": 36,
	                  },
	                  {
	                    "BILLNO": "D22366",
	                    "AMOUNT": 221,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22367",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22368",
	                    "AMOUNT": 79,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22369",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22370",
	                    "AMOUNT": 267,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22371",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22372",
	                    "AMOUNT": 140,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22373",
	                    "AMOUNT": 89,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22374",
	                    "AMOUNT": 202,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22375",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22376",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22377",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22378",
	                    "AMOUNT": 118,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22379",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22380",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22381",
	                    "AMOUNT": 71,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22382",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22383",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22384",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22385",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22386",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22387",
	                    "AMOUNT": 79,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22388",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22389",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22390",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22391",
	                    "AMOUNT": 126,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22392",
	                    "AMOUNT": 231,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22393",
	                    "AMOUNT": 142,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22394",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22395",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22396",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22397",
	                    "AMOUNT": 142,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22398",
	                    "AMOUNT": 62,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22399",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22400",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22401",
	                    "AMOUNT": 80,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22402",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22403",
	                    "AMOUNT": 89,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22404",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22405",
	                    "AMOUNT": 58,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22406",
	                    "AMOUNT": 147,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22407",
	                    "AMOUNT": 80,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22408",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22409",
	                    "AMOUNT": 140,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22410",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22411",
	                    "AMOUNT": 100,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22412",
	                    "AMOUNT": 58,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22413",
	                    "AMOUNT": 142,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22414",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22415",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22416",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22417",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22418",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22419",
	                    "AMOUNT": 192,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22420",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22421",
	                    "AMOUNT": 70,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22422",
	                    "AMOUNT": 70,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22423",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22424",
	                    "AMOUNT": 121,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22425",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22426",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22427",
	                    "AMOUNT": 147,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22428",
	                    "AMOUNT": 76,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22429",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22430",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22431",
	                    "AMOUNT": 89,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22432",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22433",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22434",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22435",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22436",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22437",
	                    "AMOUNT": 189,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22438",
	                    "AMOUNT": 63,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22439",
	                    "AMOUNT": 37,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22440",
	                    "AMOUNT": 77,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22441",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  }
	                  
	                ]
    
    
    function addTable(tableValue) {
		var col = Object.keys(tableValue[0]); // get all the keys from first
				
		var countNum = col.filter(i => !isNaN(i)).length; // count all which
															// are number
		var num = col.splice(0, countNum); // cut five elements from frist
		col = col.concat(num); // shift the first item to last
		// CREATE DYNAMIC TABLE.
		var table = document.createElement("table");

		// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

		var tr = table.insertRow(-1); // TABLE ROW.


		  for (var i = 0; i < col.length; i++) {
		    var th = document.createElement("th"); // TABLE HEADER.
		    th.innerHTML = col[i];
           
		    tr.appendChild(th);
		}

		// ADD JSON DATA TO THE TABLE AS ROWS.
		for (var i = 0; i < tableValue.length; i++) {

		    tr = table.insertRow(-1);

		    for (var j = 0; j < col.length; j++) {
		        var tabCell = tr.insertCell(-1);
		         var tabledata = tableValue[i][col[j]];
    if(tabledata && !isNaN(tabledata)){
      tabledata = parseInt(tabledata).toLocaleString('en-in')
    }
    tabCell.innerHTML = tabledata;
              
              if (j > 1)
             
              tabCell.classList.add("text-right");
              
		    }
		}

		// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
		var divContainer = document.getElementById("newTable");
		divContainer.innerHTML = "";
		divContainer.appendChild(table);
		table.classList.add("table");
		 table.classList.add("table-striped");
		 table.classList.add("table-bordered");
		 
		 
		}
                     
	addTable(tableValue)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
	<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="newTable"></div>
  
    

Answer 1

Использовать плагин blockUI.Он отлично работает как загрузчик и может быть настроен

http://malsup.com/jquery/block/

Answer 2

Я добавил немного CSS для отображения небольшого загрузчика, в то время как body не имеет класса ready.Затем просто дождитесь окончания вызова ajax и добавьте класс в свое тело.(Я добавил ваш ложный код в обработчик ошибок и немного уменьшил его дублирование, чтобы его было проще отслеживать и приближать к исходному замыслу).

$.ajax({
    url: "TestServlet",
    method: "GET",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: {
        fromdate : $("#startdate").val(),
        todate : $("#enddate").val(),
        outlet : $("#all").val()
    },  
    success: function( value ) {
        
        addTable( value );
        document.body.classList.add( 'ready' );
    
    },  
    error: function( error ) {
        
        // Lets do this to keep the mock data short
        const tableValue = [{ BILLNO: "D22364", AMOUNT: 79, COUNTER: "Fast Food"}];

        while( tableValue.length < 50 ) tableValue.push( Object.assign({}, tableValue[0]) );
    
        // Lets do this to guarantee a little delay
        // So you can at least see the loader as if it took some time.
        setTimeout(() => {
        
          addTable( tableValue );
          document.body.classList.add( 'ready' );
        
        }, 1000);
    
    }  
});

function addTable( tableValue ) {

    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    var table = document.createElement("table");
    var tr = table.insertRow(-1);

    for (var i = 0; i < col.length; i++) {
    
        var th = document.createElement("th"); // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
        
    }
    
    for (var i = 0; i < tableValue.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {

          var tabCell = tr.insertCell(-1);
          var tabledata = tableValue[i][col[j]];

          if(tabledata && !isNaN(tabledata)){

              tabledata = parseInt(tabledata).toLocaleString('en-in');

          }

          tabCell.innerHTML = tabledata;

          if (j > 1) tabCell.classList.add("text-right");
  
        }
        
    }
    
    var divContainer = document.getElementById("newTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");

}

@keyframes rotate {
  from { transform: translate(-50%,-50%) rotateZ(0deg); }
  to { transform: translate(-50%,-50%) rotateZ(360deg); }
}

body:not(.ready){

  pointer-events: none;
  
}
body:not(.ready):before,
body:not(.ready):after {
  
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}
body:not(.ready):before {
  
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 1000000;
  
}
body:not(.ready):after {
  
  width: 30px;
  height: 30px;
  z-index: 1000001;
  border-radius: 50%;
  border: 5px solid white;
  border-bottom-color: transparent;
  animation: rotate 1s linear infinite;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"><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="newTable"></div>

Answer 3

Вам нужен полноэкранный оверлей.

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
}

Answer 4

Вам нужно показать загрузчик либо при загрузке страницы, либо при вызове ajax

    success : function(tableValue) {
       $(".loader").show();
    }

И удалить загрузчик, когда данные построены на DOM

      table.appendChild(tbody);
      $(".loader").hide();

Answer 5

Если я правильно понимаю ваш вопрос, вам нужно показать загрузчик div на всей странице, пока вы не получите все данные из вызова ajax.Вы можете показать загрузчик div на полной странице с высотой и шириной, установленными на 100%.Просто измените свойство display на «block» в разделе «.then» вашего вызова ajax и измените его обратно на none в конце вашего блока «.success» вызова ajax.