If I have 5 javascript files and each of different size and same with CSS, is it possible to show "real time" progress bar when scripts/css get downloaded?

I know this can't be possible in HTML4 and would require Flash/Silverlight. But can I achieve this in HTML5? If yes, how would I do it?

I want to show a text like "Downloading" and as each script/css get downloaded real time, each letter of Downloading should start filling up. I am not asking for any code. Just want a high level concept of how that is possible.

Thanks.

If I have 5 javascript files and each of different size and same with CSS, is it possible to show "real time" progress bar when scripts/css get downloaded?

I know this can't be possible in HTML4 and would require Flash/Silverlight. But can I achieve this in HTML5? If yes, how would I do it?

I want to show a text like "Downloading" and as each script/css get downloaded real time, each letter of Downloading should start filling up. I am not asking for any code. Just want a high level concept of how that is possible.

Thanks.

• javascript
• jquery
• css
• html

• Are looking for something like a preloader? – Johndave Decano Commented Aug 2, 2012 at 5:52
• @Johndave Decano: Yes, as the assets are being downloaded, my letters should get filled up with different colors. – Jack Commented Aug 2, 2012 at 6:10
• 2 This is not an answer but something to consider: most web developers spend time finding a way to make their assets load as fast as possible so that users get the best possible experience. If you want to show a preloader, fancy as it might be, you are avoiding the real problem: reducing loadtimes, bandwidth usage and requests. – Phortuin Commented Aug 2, 2012 at 9:12

1 Answer 1

Here's what I've been able to e up with; In HTML5 there is a <progress> element that you may be able to use. The bad news is that support for this element isn't as good as it could be. See the support chart here: http://caniuse./#search=progress There's no support in Safari 5 and below or IE9 and below. Partial support is in IE10 and any relevant versions of FireFox. If you need more support try a polyfil like this one: http://lea.verou.me/polyfills/progress/

If you choose to use the <progress> element here's a link about how to style it: http://www.useragentman./blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

Now the trick about making this work, you'll need to know the file size of the file(s) you'll be downloading and the number of bytes downloaded. As the files are being downloaded you'll have to get the header info that tells you how many bytes are transferred. You can see a sample of how to do that with jQuery here: http://markmail/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

Note that this method will not work with IE. IE does not expose the header data of the XHR object.

At this point set the max attribute of the <progress> element to the total file size and using the setTimeout sample, update the value attribute of the <progress> element.

Knowing all this, maybe finding some kind of package solution with a built-in Flash fallback might be much easier to implement, and have better support. Anyone else have any ideas?

Good luck.