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:
