Ajax Loading Bar How do you do it?

[iGuest 3]

Hi,I've seen some sites around that use ajax alot, for loading pages, images etc. And I've noticed that, instead of just showing a picture or text while loading, they have a loading bar. How do you do that? Is there any way of finding out how much of something in ajax has loaded, and use a loading bar to show it?

[toby 0]

http://www.ajaxload.info/

Not pretty imo.

[iGuest 3]

No, that's not quite what I'm looking for. They're just animations that loop while it's loading. I need a loading bar that'll progress as it loads.

[Sten 0]

something like a flash loading bar i gather in flash games and that. the ones that move as it loads. is that wot u want?

[TavoxPeru 0]

The ExtJS javascript library has a progress bar that you can use, also it offers a lot of interesting things that you can use to develop a complete web application.

Visit ExtJS 2.0 for more information.

Best regards,

[toby 0]

Ajax doesn't have any progression notice, if you find the four modes it's just request send, request recieved, being worked on, and come back. The best you could do is quarters, which like all ajax scripts would be by the statechange.edit: Yeah, your link, the first two, with the four stages are more true, but the other two are more expected. Depends what you are after Habble, true or fluid.

Edited February 24, 2008 by toby (see edit history)

[TavoxPeru 0]

Ajax doesn't have any progression notice, if you find the four modes it's just request send, request recieved, being worked on, and come back. The best you could do is quarters, which like all ajax scripts would be by the statechange.

Yeah, you are right, ajax doesn't have any progression notice, but i think that a simple way to simulate this is when you start the request you also start the progress bar and when the request is complete stop it.
Take a look to the Ext JS Progress Bar Example.

Best regards,

[java-area 0]

No, that's not quite what I'm looking for. They're just animations that loop while it's loading. I need a loading bar that'll progress as it loads.

This is only to illustrate the idea:

<script language='javascript'>

// XMLHttpRequest object callback function
function callback() {

// get current position of progress bar ( 0 .... 100 )
var pos = XMLHttpRequestObject.responseText;
.....
document.getElementById('myElement1').width = pos;
}

</script>

<table border=1>
<tr>
<td id='myElement1' width=0 height=15 bgcolor='blue'></td>
</tr>
</table>
Edited February 25, 2008 by java-area (see edit history)