I am working on Bootstrap spinners , i am stuck with load spinner whenever we click a button

Question

<div class="container">
<h1 id="Tickets"><span class="spinner-grow text-muted"></span></h1>
</div>

1. Here i am showing a normal bootstrap spinner. it can be visiable whenever we load html page. 2)i need to run whenever we click a button.after getting output spinner should be stop, if we again press the button again spinner should be visible

$(document).ready(function (data) {
  $("#btnGo").click(function () {
}
}
[![need to load spinner inside kpi widget][1]][1]

Answer 1

Add an id to the spinner:

<span class="spinner-grow text-muted" id='spinner'></span>

When you want to show the spinner:

$("#spinner").removeClass("d-none");

When you want to hide the spinner:

$("#spinner").addClass("d-none");

Answer 2

You can hide the spinner by just adding a class to it. Like

.hidden {
 display:none;
}

Then apply this class whenever your ajax request is complete and remove when clicking the button.

Disabling Spinner

$.ajax({
..
complete:function(){
   $("#spinner").addClass("hidden")
}
})

Showing Spinner

$("#btnGo").click(function () {
  $("#spinner").removeClass("hidden");
}