How To Make Spinner dialogue in bootstrap and jquery

How to make spinner dialogue in boostrap and jquery

or

Please wait....

you need to have this spinner first

Download This now

Step 1 :

create the div element that loads this image of spinner dialouge

 <div id="loading" style="display: none;">
    <img id="loading-image" src="src/images/loading.gif" alt="Loading...">
 </div>

You keep the style as display :none as no one should see it

Please ensure that the .gif is strored in src/images/loading.gif  location in local directory

---

Step 2: create the css for loading and display on the page

the css code is as under

<style type="text/css">
  #loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  z-index: 100;
  margin:200px auto;
}


  .modal {
  overflow-y:auto;
}
</style>

---

Step 3 : now to simply load the spinner dialogue call the in the function

i have written the code for hiding an un hideing of the spinner dialouge

        $("#loading").show();

        $("#loading").hide();

---

---

Step 4 : The final code looks like this

you can also integrate the ajax call into it

here i am calling the loading function as before send

        beforeSend: function() {
        $("#loading").show();
        },

and then after the loading completes the after data has been received

$("#loading").hide();

---

      $.ajax({
        url: 'nc_ht_trans.php', // point to server-side PHP script 
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        beforeSend: function() {
        $("#loading").show();
        },
          
        success: function (response) {
          console.log(response);
          var arrayList = $.parseJSON(response);
          alert(arrayList.message);
          window.location='./nc_ht_trans.html';
          $("#loading").hide();
        },
      });

---