loader

by rwone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<div class="container">
  <button id="button1" type="button">click me</button>
  <div id="loader"><img src="https://picsum.photos/200"></div>
</div>

CSS

#loader {
  display: none;
}

JavaScript

$(document).on("click", "#button1", function() {

  // show the loader 
  $("#loader").show();
  /* 
   BEGIN mockjax
   this just imitates ajax behaviour in this demo 
   see:  https://github.com/jakerella/jquery-mockjax
   */
  $.mockjax({
    url: `/path/to/your/file`,
    responseTime: 3000, // mimic a delay of 3 seconds for this demo  
    response: function(settings) {
      response = {
        status: "great!",
        message: "everything is good!"
      };

      this.responseText = JSON.stringify(response);
    }
  });
  // END mockjax - this just imitates ajax behaviour in this demo 

  $.ajax({
    url: `/path/to/your/file`,
    data: {
      "key1": "val1"
    }, // send the parameters to your server side file
    type: "POST",
    success: function(response) {
      // hide the loader
      $("#loader").hide();
    }
  });



});