CODEWITHSUNDEEP
phpjquerycsslaravellaravel-4
iori
iori

Reputation: 3506

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

enter image description here

enter image description here

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

Upvotes: 5

Views: 29597

Answers (4)

Medo
Medo

Reputation: 21

Your question :

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

You should visit http://www.ajaxload.info/ there you can chose,customize and download loading gif really fast.

Upvotes: 1

Roger
Roger

Reputation: 3256

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

Upvotes: 5

Niahm
Niahm

Reputation: 396

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

Upvotes: 4

anEffingChamp
anEffingChamp

Reputation: 166

This depends on what language you use, but the fundamentals are the same. You load the page with just the animation while the query completes, and then replace the animation with the content.

In jQuery this probably means linking the animation in plain HTML, then separately calling the database with AJAX. When you get the result, you can use jQuery append to target the content area, and write into that in real time.

I include PHP since you say that you are not using AJAX, but in PHP the structure is the same: You would need to link the image, flush the page so that it displays, and then execute your query. Cover the animation with negative CSS margin-top on the search results, and Bob is your uncle.

Upvotes: 2

Related Questions