New UI Pattern: Website Loading Bars

Here’s an emerging UI pattern: a web page loading bar. Unsatisfied with progress indicators provided by the browser, some sites are implementing their own ones to show the load status of the next page. The progress bar appears as a thin line overlaying the content, sitting right underneath the browser toolbar, growing in width across the page as the next one loads.

Here is a screenshot of the bar on Medium (the thin green line highlighted at the top):

medium.com loading bar

And here is a very similar implementation on YouTube, red this time, with a subtle glow effect:

youtube.com loading bar

I’m not sure what to make of it. Does a web page really need a loading bar, especially that the browser already has a loading indicator of its own (and in the case of Safari, a very similar looking progress bar)? Perhaps a case could be made for a reduction in perceived load time, and I am sure Google are testing this on YouTube (i.e. see if the bar reduces the number of abandonments, which it very well might), but for something like Medium where the content is mostly text and the load times very short it seems a little superfluous – and even in the case of YouTube, the load indicator is only for the page, not the actual video, which starts streaming only after the page loads. Still, as a UI pattern it is an interesting and subtle way to show load progress on a page.

As an aside: if you’re implementing progress bars, check out this paper by Harrison, Yeo and Hudson, which reports on their study of progress bars that sought to find the style to best reduce perceived time. The optimal style they found was a backwards moving and decelerating ribbed progress bar, which made the load time appear 11% faster than a solid colored bar.

Update

As commenters have pointed out, the reason to use the bar is because you’re switching content via JavaScript rather than loading a new page. This makes sense since the browser’s own loading indicator may not get triggered. Without the loading bar or some other load indicator it may appear that the page is stuck rather than fetching new content. Ideally we would want to delegate the indicator to the browser, but if that’s not possible this is a nice UI pattern we can use.