I'm working with a spinner on a button. I can not add my spinner correctly, this is an image .gif that when loading the page the spinner appears in the whole window and should appear at the moment of clicking on the onclick event of the button.
This is my code:
function executeAjaxRequest() {
$(window).load(function() {
$(".loading").fadeOut("slow");
});
}.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../gif/loading.gif') 50% 50% no-repeat rgb(249, 249, 249);
opacity: .8;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-4 col-sm-offset-4 text-center">
<button type="button" id="navegar" class="btn btn-primary" onclick="executeAjaxRequest();">Navegar</button>
<div class="loading"></div>
</div>