0

I've run into this problem where my ajax request processes too fast to show my loading icon, I'd just like it to run through for a second or so, how would I be able to achieve this?

HTML:

<img class="loader" id="loader" src="Social_Icons/loader.svg" alt="Book Loader Icon">

JS:

$(document).on('click','#sub',function(e) {
    function showLoading(){
        document.getElementById("loader").style = "visibility: visible";
    };
        function hideLoading(){
        document.getElementById("loader").style = "visibility: hidden";
    }
        showLoading();
      var data = $("#text").serialize();
      $.ajax({
             data: data,
             type: "post",
             url: "processing.php",
             success: function()
             {
                 hideLoading();
                 alert("success");
             },
             error: function()
              {
                  hideLoading();
                  alert("save failed");
              }
            });
     });

CSS:

.loader {
position: fixed;
right: 2%;
bottom: 0%;
width: 15vmin;
visibility: hidden;
}

Any help would be fantastic! :)

akemedis
  • 414
  • 2
  • 6
  • 17
  • 2
    Why get hung up on showing a loader if it's not necessary? Code that executes quickly is a good thing. Making users wait is not. If you must make users wait take a look at: [How to set time delay in javascript](https://stackoverflow.com/questions/17883692/how-to-set-time-delay-in-javascript) – tshimkus May 23 '19 at 06:21
  • Because it's pretty and part of the branding :) – akemedis May 23 '19 at 06:38

1 Answers1

2

You could add a timeout in JS for 1 second - before hiding the loader. See the code below:

setTimeout(function () {
        hideLoading();
    }, 1000);
Hunor
  • 449
  • 1
  • 5
  • 19