How to show loading animations or progress bars when retrieve data from database?

Question

• I retrieve about 15,000 rows from my database every time I visit this page.
• The page might take about 8-10 seconds to finish load everything - I currently, use DataTable.

• I think it would be nice to show user any kind of loading feedback during that time.

• I want to create my own loading animations, and chose my own color, style, and size.

• I'm not if I use any Ajax call.
• I am just retrieving a lot of data out of my database.

What is the most efficient way to show loading animation while retrieving data from database ?

Answer 1

To begin with, the most simple solution is to use ajax call to retrieve the table rows populated by php.

JSFiddle

---

SIMPLE:

main.html / main.php

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

An example of the php would look something like this

example.php

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

---

ADVANCED:

A more advanced way to load your content is to use webworkers and multiple database calls segregated into small chunks.

You would set up web-workers to do small 100 row results and use LIMIT in your sql statements to page the results into small chunks. Then you can page through the first 100 results while the other results are loading.

This process is more difficult and takes longer to implement, but leads to seamless and quick loading.

---

EDIT:

If you want to change the loading animation just change the URL. and if you want the URL to be loaded on page load put it in the div itself.

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

The Image doesn't have to be an image. It can be any loading icon you want. A gif was quick and dirty. You could use something like font-awesome spinner

Answer 2

data.php to check out the DB and build the table's HTML

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();