CODEWITHSUNDEEP
javascript
vignesh
vignesh

Reputation: 1599

Need to show progress bar while page loads

I am new to Javascript.

I am having a html which shows a report graph.

It takes 5-10 secs for the report to generate in html.

I want to show progress bar before the report generates.

Upvotes: 1

Views: 10373

Answers (4)

bitlamas
bitlamas

Reputation: 742

I'm not sure if you can achieve this using only JavaScript, but you could check for this script which checks if all the images are loaded, showing a progress bar. Alternatively, as other people said, you could use a loading gif (make one here) that hides after your page has been loaded.

I've only seen great progress bars when using Flash, but I believe it's not your case to use this technology.

Upvotes: 0

Mahesh KP
Mahesh KP

Reputation: 6446

You can add a div with background image as the loader image.

Show this div in the loading and hide the graph. After loading the graph hide the loader div and show the graph

Upvotes: 0

herostwist
herostwist

Reputation: 3958

If you're new to javascript i wouldn't try takling a progress bar. I sugest you go with a simple working icon. Use an animated gif created from http://www.ajaxload.info/ and display that while you build your table in a hidden div. when you have finished building the table, show the hidden div and hide the loading icon.

Upvotes: 0

Atticus
Atticus

Reputation: 6720

Have an animated gif show by default, when your graph is done loading then hide it. Does your loading funciton have a function callback option? if it does, do this here. Otherwise, have the loading icon with a low z-index overlapping your graph, give the graph a higher z-index. vwalah.

If you're tracking % loaded, you can have a setup like so:

<div id='progress-bar-total'>
   <div id='progress-bar-percent'></div>
</div>

Have continuous calls to a function that does something like this:

function updateProgress(bytesRead, bytesTotal){
   var current = (bytesRead/bytesTotal) + "%";
   $("#progress-bar-percent").css("width", current);
}

Upvotes: 1

Related Questions