问从数据库检索数据时如何显示加载动画或进度条？

EN

/*This makes the timeout variable global so all functions can access it.*/
var timeout;

/*This is an example function and can be disregarded
This function sets the loading div to a given string.*/
function loaded() {
  $('#loading').html('The Ajax Call Data');
}

function startLoad() {
    /*This is the loading gif, It will popup as soon as startLoad is called*/
    $('#loading').html('<img src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>');
    /*
    This is an example of the ajax get method, 
    You would retrieve the html then use the results
    to populate the container.
    
    $.get('example.php', function (results) {
        $('#loading').html(results);
    });
    */
    /*This is an example and can be disregarded
    The clearTimeout makes sure you don't overload the timeout variable
    with multiple timout sessions.*/
    clearTimeout(timeout);
    /*Set timeout delays a given function for given milliseconds*/
    timeout = setTimeout(loaded, 1500);
  }
  /*This binds a click event to the refresh button*/
$('#start_call').click(startLoad);
/*This starts the load on page load, so you don't have to click the button*/
startLoad();

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='start_call'>Refresh</button>
<div id='loading'></div>

/*Database call to get list*/
foreach($list as $li){
    echo "<tr><td>$li[var1]</td><td>$li[var2]</td></tr>";
}

/*This will make the img load on page load rather than DOM execution.*/
<div id='loading'>
    <img src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>
</div>

function getData(){

    //div contains the loader
    $('#loader').show();

    $.get('clients/data.php', function(data) {
        //
        $('#content').html(data);
        //hide the loader
        $('#loader').hide();
        //build DataTable
        $('#content table').dataTable();

    });
}

getData();