Loading modal during time consuming jquery function

Question

I have a function in jquery that takes a little while and a great while and would like to do a loading modal during that time, how can I do this?

            $.each(dataExport, function (i, item) {
            $("#Export").append('<tr>\n\
                    <td>' + item.Vitima + '</td>\n\
                    <td>' + item.NomeCompleto + '</td>\n\
                    <td>' + item.NomeMae + '</td>\n\
                    <td>' + item.DataNascimento + '</td>\n\
                    <td>' + item.DataAcidente + '</td>\n\
                    <td>' + item.Sexo + '</td>\n\
                    <td>' + item.MeioTransporte + '</td>\n\
                    <td>' + item.CondicaoVitima + '</td>\n\
                    <td>' + item.EnderecoVitima + ' ' + item.NumeroVitima + ' - ' + item.BairroVitima + ' ' + item.MunicipioVitima + '/' + item.EstadoVitima + '</td>\n\
                    <td>' + item.NUMSUS + '</td>\n\
                </tr>');
        });

while this one doesn’t finish I want to keep showing the loading

Answer 1

Uses a <div> backdrop and a GIF or SVG spinner.

Leaves the backdrop with display: none; by default and display: block; when you have class active.

Then to activate the spinner just do $('#backdrop').addClass('active'); and to deactivate $('#backdrop').removeClass('active');

var spinner = $('.loading-spinner');

$('#click-me').on("click", function(){
  spinner.addClass('active'); // ativa o loading
  
  // Espera 5 segundos e desativa o loading
  setTimeout(function(){
    spinner.removeClass('active'); 
  }, 5000);
});

.loading-spinner {
  background: #333;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: none;
}

.loading-spinner.active {
  display: block;
}

#hourglass { /* centraliza no meio da tela */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -32px 0 0 -32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="loading-spinner">
  <svg id="hourglass" width='64px' height='64px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-hourglass"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g><path fill="none" stroke="#007282" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z" class="glass"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25" class="clip"><animate attributeName="height" from="25" to="0" dur="1s" repeatCount="indefinite" vlaues="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1s" repeatCount="indefinite" vlaues="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25" class="clip"><animate attributeName="height" from="0" to="25" dur="1s" repeatCount="indefinite" vlaues="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1s" repeatCount="indefinite" vlaues="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" fill="#ffab00" class="sand"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" fill="#ffab00" class="sand"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g></svg>
</div>


<button type="button" id="click-me">Click Me</button>