<div id="spinner-div" class="pt-5">
  <div class="spinner-border text-primary" role="status">
  </div>
</div>
<div class="container">
  <div class="row mt-2">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          <h3 class="text-center text-primary">Ajax spinner whilst loading</h3>
          <div class="row">
            <div class="col-6">
              <button type="button" class="btn btn-success my-2" id="do-call">Load the message</button>
            </div>
            <div class="col-6 mt-2">
              <p id="message_string">The message is:</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

#spinner-div {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2;
}

$(document).ready(function () {
  $("#do-call").click(function () {//The load button
    $("#spinner-div").show(); //Load button clicked show spinner
    $.ajax({
      url: "https://api.srv3r.com/2seconds/", //Takes 2 seconds to complete this request
      type: "GET",
      dataType: "json",
      success: function (res) {
        $("#message_string").text("The message is: " + res.message); //Write the message
      },
      complete: function () {
        $("#spinner-div").hide(); //Request is complete so hide spinner
      }
    });
  });
});