Cross Browser HTML5 Progress Bars In Depth

Cross Browser HTML5 Progress Bars In Depth.

We’ve been working with audio and video for some time now, but are you taking advantage of the progress element? Chances are you may not even know of it’s presence, but it’s wicked sweet.

Screenshot of various progress bar chrome

With Web apps becoming more and more advanced, visual feedback is important. Until now, we’ve often resorted to a spinner or some other sort of infinite loop indicator that does little more than express “hold on a sec”.

What better way to up the UX ante by providing even more worthwhile feedback for processes that take a decent amount of time? I can see spinners sticking around for a long time because many times we’re making a request that’s just waiting for a response, there isn’t that much work taking place. By the time a progress bar was presented in those cases, it would likely prove to be more confusing than helpful.

For those cases where a measurable amount of work is being performed, progress is a great choice.