title: Implement a loading indicator for a jQuery AJAX call
body: <p>I have a Bootstrap modal which is launched from a link. For about 3 seconds it just sits there blank, while the AJAX query fetches the data from the database. How can I implement some sort of a loading indicator? Does twitter bootstrap provide this functionality by default?</p>
  
  <p>EDIT: JS code for modal</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $('#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&lt;'row-fluid'&lt;'span6'l&gt;&lt;'span6'f&gt;r&gt;t&lt;'row-fluid'&lt;'span6'i&gt;&lt;'span6'p&gt;&gt;",
              "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();
    });
  &lt;/script&gt;
  </code></pre>