Blog

I’ve been working on this application that performs a load of update queries after all the parameters have been gathered. This can take any where from 20 seconds to a few minutes. I wanted to show my users a progress indicator, so they don’t think the browser is just stuck or something. I’ve seen people show a JS alert at the beginning of the process, to warn the user. But I would prefer to show a real time progress indicator.I put one together that updates the progress at the end of every loop. Before the process begins, it finds out how many updates need to be made, then at the end of each loop it divides a loop counter into the total, and displays a percentage. The trick is changing the percentage on the page in real time. I did that part with JavaScript’s innerHTML function. Here’s a code sample:

....queries and other work...... Now I get a nice percentage complete indicator while the updates are working, and when it’s all done the progress indicator disappears (in my case it’s replaced with other content, but that isn’t shown here).