Display An Animation While Loading A Page Using JQuery

I have a page that takes information from a database. It exports a lot of information, so it takes a few seconds to load. I do have an animation, but it is not behaving how I want

Solution 1:

$(document).ready() will only run when the DOM is done downloading, basically when </html> is downloaded at the end of your page. If your database data is part of the page, it will be loaded by the time the DOM ready event fires. Meanwhile, $(window).load() will fire when all the resources on the page have loaded; all the images, external stylesheets, etc.

Perhaps you could have a stylesheet before the data which hides the content, then an internal stylesheet at the bottom of your page, after the data, which makes the content display and the #content-loading element hidden?

Otherwise, you could load the data asynchronously in some way, with AJAX or in a frame.

Solution 2:

http://fgnass.github.io/spin.js/

See this, if you want to add a loading.....

Solution 3:

your animation won't run until the whole page is loaded (including all that db stuff). Instead, load a page that has just your animation, and an AJAX call to the db data. Then the db call is asynchronous.