Home/ Questions/Q 8348151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T07:36:23+00:00

If I have 5 javascript files and each of different size and same with

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s what I’ve been able to come 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.com/#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.com/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.org/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.

    • 0