Implementa un indicatore di caricamento per una chiamata jQuery AJAX

Ho un modale Bootstrap che viene avviato da un collegamento. Per circa 3 secondi rimane solo vuoto, mentre la query AJAX recupera i dati dal database. Come posso implementare una sorta di indicatore di caricamento? Il bootstrap di Twitter fornisce questa funzionalità per impostazione predefinita?

EDIT: codice JS per modal

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    $('#myModal').off('show');
    $('#myModal').on('show', function(){             
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);
          $(".modal-header h3").html(vendor);
          $('.countstable1').dataTable({
            "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
              "sLengthMenu": "_MENU_ records per page"
            },
            "aaSorting":[[0, "desc"]],
            "iDisplayLength": 10,
            "oTableTools": {
              "sSwfPath": "swf/copy_csv_xls_pdf.swf",
              "aButtons": ["csv", "pdf"]
            }
          });
        }
      });
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
  });
</script>

Immagino che tu stia usando jQuery.get o qualche altra funzione jQuery ajax per caricare il modal. Puoi mostrare l'indicatore prima della chiamata ajax e nasconderlo quando l'ajax è completo. Qualcosa di simile a

$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

Ho risolto lo stesso problema seguendo questo esempio:

Questo esempio utilizza la libreria JavaScript jQuery.

Innanzitutto, crea un'icona Ajax utilizzando il sito AjaxLoad .
Quindi aggiungi quanto segue al tuo codice HTML:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

E quanto segue al tuo file CSS:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

Infine, è necessario collegarsi agli eventi Ajax forniti da jQuery; un gestore di eventi per quando inizia la richiesta Ajax e uno per quando finisce:

$(document).ajaxSend(function(event, request, settings) {
    $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
    $('#loading-indicator').hide();
});

Questa soluzione è dal seguente collegamento. Come visualizzare un'icona animata durante l'elaborazione della richiesta Ajax

Esiste una configurazione globale che utilizza jQuery. Questo codice viene eseguito su ogni richiesta Ajax globale.

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="themes/img/ajax-loader.gif"></img>
</div>

<script type="text/javascript">
    jQuery(function ($){
        $(document).ajaxStop(function(){
            $("#ajax_loader").hide();
         });
         $(document).ajaxStart(function(){
             $("#ajax_loader").show();
         });    
    });    
</script>

Ecco una demo: http://jsfiddle.net/sd01fdcm/

Un indicatore di caricamento è semplicemente un'immagine animata (.gif) che viene visualizzata fino a quando l'evento completato non viene chiamato sulla richiesta AJAX. http://ajaxload.info/ offre molte opzioni per generare immagini di caricamento che puoi sovrapporre ai tuoi modali. Per quanto ne so, Bootstrap non fornisce la funzionalità integrata.

Ecco come ho funzionato con il caricamento di contenuto remoto che deve essere aggiornato:

$(document).ready(function () {
    var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';

    // This is need so the content gets replaced correctly.
    $("#myModal").on("show.bs.modal", function (e) {
        $(this).find(".modal-content").html(loadingContent);        
        var link = $(e.relatedTarget);
        $(this).find(".modal-content").load(link.attr("href"));
    });    

    $("#myModal2").on("hide.bs.modal", function (e) {
        $(this).removeData('bs.modal');
    });
});

Fondamentalmente, basta sostituire il contenuto modale durante il caricamento con un messaggio di caricamento. Il contenuto verrà quindi sostituito al termine del caricamento.

Ecco come ho realizzato l'indicatore di caricamento di un Glyphicon:

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

    <style>
        .gly-ani {
          animation: ani 2s infinite linear;
        }
        @keyframes ani {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(359deg);
          }
        }
    </style>  
</head>

<body>
<div class="container">

    <span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>

</div>
</body>

</html>