How Can I Add Ui Spinner On Ajax Call?

I want to show loading spinner on Ajax call. I tried spin.js library but it didn’t work. Here is my JavaScript function, which using Ajax call. function sendRequest() { $.aja

Solution 1:

You don't need any libraries to do this. Just add an image to your markup, have it hidden by default, show it when you send a request and hide it when your request is done.

JavaScript

functionsendRequest() {
      // show spinner
      $('#spinner').show();
      $.ajax({
          url: '/spinner',
          type: 'get',
          contentType: "application/json",
          success: function (resp) {
              $('#spinner').append(resp.data);
              console.log(resp.data);
          },
          error: function () {
              console.log("Oops!");
          }
      }).done(function () {
          // hide spinner
          $('#spinner').hide();
      });
  }

HTML

<img src="path/to/img.png"id="spinner"/>

CSS (you may want to edit this)

#spinner{
  display: none;
  position: absolute;
  left: 50%;
  top: 20%;
}