CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user10561216
user10561216

Reputation:

How to deactivate the background when loader is loding

I am working on how to show loader until the data loaded on the page . i have successfully created the loader and its working fine also, where i am stuck is while the loader is loading i want to deactivate the background like user cannot click anywhere here is my snippet

$('.loader').show();
$.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);

  },
  complete: function() {
    $('.loader').hide();
  }

});


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");


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

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="loader"></div>

<div id="newTable"></div>

here i am putting sample JSON so if anyone wants to check they can easily check

  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"
          }
        ]

i am using j query hide and show method for that and after success call i am hiding it.

and i also want to position my loader center

please anyone having any idea help me out

Upvotes: 0

Views: 803

Answers (3)

Irina Potapova
Irina Potapova

Reputation: 794

The main idea is to add new element <div class="overlay"></div> that will cover all your content. Here is full example with centering of the loader:

$('.loader').show();
$('.overlay').show(); // show overlay when loader is active
$.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 );    		
	},
	complete: function(){
            $('.loader').hide();
            $('.overlay').hide(); // hide overlay when you need your page to be active (e.g. clickable)  
	}
			   
});


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");
	 
	 
	}
.loader {
  display: none; /* it shouldn't be visible by default */
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  /* align loader vertically via position, left and right  */
  position: fixed;
  left: calc(50% - 60px);
  top: calc(50% - 60px);
  z-index: 10001; /* z-index should be more than z-index of .overlay */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.overlay {
  display: none; /* it shouldn't be visible by default */
  background-color: rgba(1, 1, 1, 0.15);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000; /* z-index should be less that z-index of .loader */
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<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>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="loader"></div>
<div class="overlay"></div> <!-- new element -->

  <div id="newTable"></div>

Upvotes: 1

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

You need to add a overlay, here i posted an answer with basic please try this. You can hide the loader by calling $('.overlay').hide(); in last of the addTable Function

$('.loader').show();

   var tableValue = [
        {
            "amount": 476426,
            "billdate": "2018-09-01",
            "outlet": "JAYANAGAR"
          }
        ]
    addTable( tableValue );
		



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");
	//$('.overlay').hide();
	}
.loader {
 position: absolute;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  
  
}
.overlay {
    background: #e9e9e9; 
          
    position: absolute;  
    top: 0;                
    right: 0;               
    bottom: 0;
    left: 0;
    opacity: 0.5;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<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>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="overlay">
<div class="loader"></div>
</div>

  <div id="newTable"></div>

Upvotes: 1

Rao
Rao

Reputation: 407

Here is a jQuery solution for those looking:

Hide the body with css then show it after the page is loaded:

CSS:

html { visibility:hidden; }

JavaScript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

The page will go from blank to showing all content when the page is loaded, no flash of content, no watching images load etc.

and for more refer this

Upvotes: 0

Related Questions