loader (with modal)

by rwone

HTML

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

CSS

#modal_bg {
  position: absolute;  
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .9);
}

#loader {
  width: 200px;
  height: 200px;
  margin: auto;
  margin-top: 30px; 
}

* {
  margin: 0px; 
}

JavaScript

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

  // show the loader 
  $("#modal_bg").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
      $("#modal_bg").hide();
    }
  });



});