Loading gif enquando processo em função ajax

Programação
,
#1

Olá :slight_smile:

Tenho uma função javascript que é ativada com um clique num botão. Como faço para apresentar um gif de loading enquanto a função está a processamento? Obrigado a todos.
Função javascript:

function myFunction() {
var data = document.getElementById('txtCC1').value;
var noticia = document.getElementById('txtCC1').value;
var elmnt = document.getElementById("detalhes");

//elmnt.scrollIntoView();
         $.ajax({
            type: 'GET',
            url: '/demo-checker/src/main/java/com/newschecker/demochecker/controller/NewsController/' + data, 
            success: function(data) { 
...
}

HTML:

<form class="mailchimp wow fadeInUp" data-wow-delay="0.7s" method="post">
      <div class="input-group subcribes">
              <input id="txtCC1" type="text" class="form-control memail" placeholder="Put your news here...">
               <button onclick="myFunction()" class="btn btn_submit f_size_15 f_500" type="submit">Search on Internet</button>
      </div>
      <p id="res" style="display: none;"></p>
      <img id="loading" src="/img/loading.gif" style="display:none;" alt="">

Como faço para o “loading” aparecer enquando a função processa?

Obrigado a todos :slight_smile:

#2

Olá amigo, tem estes links que podem te ajudar.

http://malsup.com/jquery/block
http://ajaxload.info

Fiz este exemplo:
https://codepen.io/franciscochaves/pen/NWPwJbd

1 curtida