Menerapkan indikator pemuatan untuk panggilan jQuery AJAX

Saya memiliki modal Bootstrap yang diluncurkan dari tautan. Selama sekitar 3 detik itu hanya duduk di sana kosong, sementara kueri AJAX mengambil data dari database. Bagaimana saya dapat menerapkan semacam indikator pemuatan? Apakah bootstrap twitter menyediakan fungsionalitas ini secara default?

EDIT: kode JS untuk 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>

Saya menduga Anda menggunakan jQuery.get atau fungsi ajax jQuery lainnya untuk memuat modal. Anda dapat menampilkan indikator sebelum panggilan ajax, dan menyembunyikannya saat ajax selesai. Sesuatu seperti

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

Saya memecahkan masalah yang sama mengikuti contoh ini:

Contoh ini menggunakan pustaka JavaScript jQuery.

Pertama, buat ikon Ajax menggunakan situs AjaxLoad .
Kemudian tambahkan yang berikut ini ke HTML Anda:

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

Dan berikut ini ke file CSS Anda:

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

Terakhir, Anda perlu mengikuti event Ajax yang disediakan jQuery; satu pengendali kejadian saat permintaan Ajax dimulai, dan satu pengendali saat berakhir:

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

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

Solusi ini dari tautan berikut. Cara menampilkan ikon animasi selama pemrosesan permintaan Ajax

Ada konfigurasi global menggunakan jQuery. Kode ini berjalan di setiap permintaan ajax global.

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

Ini demonya: http://jsfiddle.net/sd01fdcm/

Indikator pemuatan hanyalah gambar animasi (.gif) yang ditampilkan sampai acara selesai dipanggil pada permintaan AJAX. http://ajaxload.info/ menawarkan banyak opsi untuk menghasilkan memuat gambar yang dapat Anda overlay pada modals Anda. Sepengetahuan saya, Bootstrap tidak menyediakan fungsionalitas bawaan.

Beginilah cara saya membuatnya berfungsi dengan memuat konten jarak jauh yang perlu di-refresh:

$(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');
    });
});

Pada dasarnya, cukup ganti konten modal saat memuat dengan pesan pemuatan. Konten tersebut kemudian akan diganti setelah selesai memuat.

Beginilah cara saya menyadari indikator pemuatan oleh 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>