Как показать анимацию загрузки за заданный период времени по запросу AJAX

Question

Я столкнулся с этой проблемой, когда мой ajax-запрос обрабатывается слишком быстро, чтобы показать мой значок загрузки, я просто хотел бы, чтобы он выполнялся в течение секунды или около того, как я смогу добиться этого?

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;
}

Любая помощь будет фантастической!:)

Answer 1

Вы можете добавить тайм-аут в JS на 1 секунду, прежде чем скрывать загрузчик. Смотрите код ниже:

setTimeout(function () {
        hideLoading();
    }, 1000);