Loading gif in a SharePoint 2013 page

Question

The expected functionality is: on button click, a PPT gets downloaded(this comes from a REST call from an external site), in the meantime when the PPT is getting downloaded, a loading gif should be shown in the page and it should be stopped after the PPT is downloaded. I've tried setTimeout() function, but it doesn't seem to be working right in this case. Is it possible to implement through jQuery or javascript? Any help would be appreciated!

Answer 1

My test code:

<img src="/_layouts/15/images/loading16.GIF" style="display: none;" id="img">
<input type="button" value="download" id="download">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/sprestlib@1.8.0/dist/sprestlib.min.js"></script>
<script>
  $("#download").click(function(){
    $("#img").css("display","");
    sprLib.file('Doc/Presentation.pptx').get()
      .then(function (blob) {
        var url = (window.URL || window.webkitURL).createObjectURL(blob);
        var link = document.createElement("a");
        link.setAttribute("href", url);
        link.setAttribute("download", _fileName);
        link.style = "visibility:hidden";
        document.body.appendChild(link);
        link.click();
        setTimeout(function () { document.body.removeChild(link); }, 500);
      }).then(function(){
        $("#img").css("display","none");
      });
  })    
</script>

Test result: