When I click a button, I want to display a spinner to indicate that the browser is processing actions in the background. Interestingly, the spinner appears immediately after clicking the button on Firefox, but there is an 8-second delay before it shows up on Google Chrome. I've inspected the issue using developer tools and noticed that the class attribute is added to the HTML code right upon button click.
Below is my markup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadSpinner" style="display:none;"></div>
<button type="submit" class="btn spinnerEvent" >On</button>
<script>
$(document).on("click", "button.spinnerEvent", function(event){
$('#loadSpinner').addClass('show'); //LOADS THE SPINNER
});
</script>
<style>
#loadSpinner.show{
background:#000 url(../images/spinner-small.gif) no-repeat center center;
background-color: transparent;
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
}
</style>