Customer Page loader using Jquery

Below post is to create simple page loading using JQuery & Html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
/*Loader style*/
<style>
.loading-overlay {
    display: table;
    opacity: 0.7;
}
.loading-overlay.loading-theme-light {
    background-color: #fff;
    color: #000;
}
.loading-overlay-content {
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 1.15em;
    font-weight: bold;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
</style>
/*Loader script*/
<script>
$(document).ready(function(){
  $("button").click(function(){
    showLoading(true);
setTimeout(function(){ $(".loading").fadeOut("fast"); }, 1000);
  });
});

function showLoading(flag_){
if(flag_){
$(".loading").show();
}else{
$(".loading").fadeOut("fast");
}
}
</script>
<h1>Hello this is loader page</h1>
<button>Click me</button>
<div class="loading loading-overlay loading-theme-light loading-shown" style="position: fixed; z-index: 999; top: 0px; left: 0px; width: 100%; height: 100%;display:none">
<div class="loading-overlay-content">Loading...</div>
</div>

Output: