
New UI Pattern: Website Loading Bars - anon1385
http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/
======
wbond
I implemented this on the Package Control
([https://sublime.wbond.net](https://sublime.wbond.net)) site over the past
few months while developing it.

To get a smooth transition from page to page I use Backbone.js with pushState
and Handlebars to do client-side rendering of various pages. This allows for
nice subtle touches like the logo fading out when navigating to a package
detail screen and the search bar animating position when switching from the
homepage to the search page.

The thing that was missing was any sort of indicator that the page was
loading. A progress spinner at least indicates some sort of activity, but can
be relatively useless is knowing when something will complete.

To provide a better progress indicator, I used a combination of the XHR
readyState value, plus the number of total bytes downloaded when in readyState
3 to set the width of a bar. I then used a CSS transition property on the
width property to have the bar smoothly grow from one width to another.

Originally I had tried using JS to animate the width, but CSS transitions seem
to do a much better job of creating a nice smooth animation. The downside is
that IE8 and 9 aren't supported, but I just do full page refreshes with them
anyway since they do not support pushState.

~~~
enel
What did you use for making "Installs" plots?

~~~
wbond
I used D3 and adapted some of the code from
[http://bl.ocks.org/mbostock/3943967](http://bl.ocks.org/mbostock/3943967).

------
blauwbilgorgel
I tried to recreate this effect in raw JavaScript.

[http://fiddle.jshell.net/zuBDW/2/show/](http://fiddle.jshell.net/zuBDW/2/show/)

It doesn't load new content with ajax, nor does it pre-fetch. It just shows a
website loading bar. I think this UI element is very nice. Especially for
heavier pages, showing a website loading bar might combat users leaving, as
_something_ is happening.

For Ajax-loading I think it is a nice alternative for a center-center spinner.

~~~
lelandbatey
The importance of _something_ happening is actually quite important for many
users (I've found). An absurd example of this can be found in one of my one-
off projects: [http://gifmachine.xwl.me](http://gifmachine.xwl.me)

The first version of this didn't have any kind of gloss, just 2 text inputs
and a "go" button.

I showed it to some people I know and their immediate recommendation was to
have some feedback to see how long things where taking. However, I didn't have
any kind of a way to actually tell the user how things where going, so I took
the next best approach: I fake it.

If you look at the source code, you'll see that when you press the "make a
gif" button it starts loading the loading bar. That loading bar is totally
useless, as it is entirely client side and shows no progress at all.

But people love it! Everyone I showed it to said it was a big improvement,
making it nicer to use.

Even though it's a fake loading bar.

~~~
ilyanep
The internal console at the company I work for has something like this
(although it admits to being fake). The only complaint I have about it is that
if the operation actually hangs, the bar reaches the end and just sits there,
which is somewhat problematic.

~~~
lloeki
I [fake upload progress][demo] for browsers without xhr2. To be consistent
with the unknown file size and progress, the bar progresses asymptotically,
and thus can never reach the end. It is also consistent in perception with
what the user expects: a short upload has a fast bar (because it doesn't stay
long enough to be slow) and a longer upload has a slow bar (because the fast
part is comparatively much shorter in duration compared to the slow one). It
is also consistent on the final part, i.e when it jumps to the end: if it was
a small file, the bar was cut early yet growing fast it is expected to cross a
bigger chasm.

[demo]:
[http://codepen.io/lloeki/pen/ydmCh](http://codepen.io/lloeki/pen/ydmCh)

~~~
LinaLauneBaer
On OS X and iOS there are two different kinds of progress bars. Normal
progress bars and indeterminate progress bars. Normal progress bars are used
when you know the actual progress. Indeterminate progress bars are used when
you don't know the actual progress and you don't know how long it will take.

Here is a video showing an indeterminate progress bar:

[https://www.dropbox.com/s/mko66awdbwy6xzu/pb.mov](https://www.dropbox.com/s/mko66awdbwy6xzu/pb.mov)

~~~
lloeki
This is similar to bootstrap's _.active.progress-striped_ progress bars[0].

We use bootstrap already, but I wanted the user to feel a sense of progress,
whereas the indeterminate ones merely give a sense of action.

The iOS Messages app has a SMS progress bar that is totally fake: its duration
is actually the mean duration of the last time it took to send SMSes, and is
made to fill up to ~80% in that duration. It takes advantage of the knowledge
that the exact same task takes about the same time. So despite being fake, its
progress statistically makes sense and gives valuable, quantitative feedback
to the user.

[0]:
[http://getbootstrap.com/2.3.2/components.html#progress](http://getbootstrap.com/2.3.2/components.html#progress)

------
plorkyeran
This seems like the very definition of solving the wrong problem, especially
for something like Medium.

~~~
micampe
Medium is not even the worst, it’s quick and I’ve never seen that progress
bar. Blogger/Blogspot is my most frustrating online experience when I have to
read text: it’s very slow to load even on a fast connection and shows
fullscreen spinning cogs, breaks Safari Reader on desktop and mobile,
overrides gestures and makes me lose track.

Really, you don’t need Javascript to load a page of text.

~~~
joosters
Agreed. To me, the gears make it feel that the page is taking _longer_ to
load. It's especially rubbish because the page that loads is normally just
text and static images, not some complicated webapp. Should have been fast to
begin with.

------
bborud
This belong in a reddit post with the title "if you think your website needs
this: fuck you and the horse you rode in on".

I've seen blog sites whee an idiotic spinner comes up for a few seconds while
something or other is "loading". Something or other that is ultimately going
to show me some text.

~~~
spupy
I wish people would leave page loading to the browser, instead of using half-
assed JS that breaks every so often.

------
JacksonGariety
It seems to me that HTML5 needs an endpoint to handle AJAX and COMET-style
loading. Fewer and fewer web pages actually use reloads all the time, content
is just retrieved and switched out with JavaScript.

Loading bars are necessary, and they certainly aren't new. The browsers just
need to be updated.

~~~
markbao
Since we're seeing a lot more of these kind of single-page apps, it might be
wise for the browser vendors to implement a JS API to trigger the loading
indicator on-demand, so it would show the loading UI that users are already
familiar with. Has there been any movement on this?

For browsers that also show a loading progress bar (like Safari), it could
also allow the page to set a precent loaded value. XMLHttpRequest2 supports
progress monitoring.

~~~
minor_nitwit
That's a great idea.

------
bdegman
The New Republic uses something like this in a cool way. As you scroll down
the article, a progress bar on top shows how far you are through the article.

Try it: [http://www.newrepublic.com/article/114362/odds-clinton-
dies-...](http://www.newrepublic.com/article/114362/odds-clinton-dies-2016)

~~~
zalew
because the browser scrollbar doesn't work well enough?

~~~
windsurfer
What if there are 500 comments at the end of the article?

~~~
protonormal
Or you're a Mac OS or iOS user and the scrollbar will be invisible when you're
not scrolling.

~~~
bhaak
So because one browser developer fucks over its UI, you should fuck over the
UI of all other browsers, too?

------
sgustard
The problem with loading bars is that they lie. They promise a linear view of
a 0-100% process that does not proceed linearly. Instead, they sputter and
freeze, and most frustratingly often seem to get stuck at around 95%. Believe
me, telling your user that the page is 95% loaded and then freezing for
several more seconds is much more infuriating than a simple spinner.

This behavior goes way back to software like Real Player (buffering...),
Windows Installer (which would actually hit 100% and then reset to zero for
another round), and is seen today on YouTube, Netflix, and the browser's own
feedback bar.

Can you predict the next few seconds of network bandwidth? Do you know the
relative times of content downloading versus parsing json and browser
rendering for various clients? All these play into the feedback you're
promising, and you don't really know.

------
Bjoern
Here is a nice implementation example. [http://www.ynh.io/2013/05/24/rebuild-
youtubes-progress-bar.h...](http://www.ynh.io/2013/05/24/rebuild-youtubes-
progress-bar.html)

Previously on HN
[https://news.ycombinator.com/item?id=5761898](https://news.ycombinator.com/item?id=5761898)

------
mholt
Excellent. I was actually looking for an article about Medium- and YouTube-
style loading bars this morning.

YouTube seems to actually track loading progress with their bar.

Medium's uses CSS animations to create a sort of "ticker" effect that doesn't
actually convey progress, but rather activity. Still, this is pretty cool.

------
prehkugler
This is going to get pretty darn confusing for people running iOS7 Safari.
[http://imgur.com/Mv8lu1J](http://imgur.com/Mv8lu1J)

------
geuis
Just to mention where this comes from: iOS 7. I don't like it on the phone,
and it's a bad experience on the web. I'm a firm believer in subtlety in user
interfaces, but this is so subtle that it's nearly invisible.

~~~
simcop2387
Not necessarily IOS 7 [though maybe it popularized it]. There's a number of
android apps (firefox, reddit is fun) that do the same thing and I don't like
it there either. I'd prefer some kind of larger more noticeable way for me to
see that it's loading, and that it's actually doing something. Sometimes if
loading is slow it's easy to not notice these 1 pixel bars changing.

~~~
mintplant
Yeah, this isn't at all coming from iOS 7. Most any Android app that loads
some content in an embedded web view uses this pattern.

------
adrianmacneil
Facebook seems to have a much better solution to the AJAX-loading progress
problem. It looks like they use an iframe as transport, which causes the
native browser spinner to appear. Much better than a custom design.

Of course, it would be even better if websites could programmatically
enable/disable the browser progress spinner, in much the same way we are now
trusted to mess with the history API.

------
PStamatiou
I use this on my site.. but for a different reason. Showing scroll location on
very long articles. Like this one [http://paulstamatiou.com/android-is-
better](http://paulstamatiou.com/android-is-better)

I was actually going to also have it display a toast-like "7 minutes [of
reading] left" on the top left when you scroll a good amount.

~~~
warfangle
Hey, just a heads up -- it looks like your SSL certificate is mismatched to
your domain, and chrome throws up red flags over it.

~~~
PStamatiou
oops, that's because I don't use ssl and typed it in incorrectly :) I should
redirect it though

------
manojlds
It is very nicely done at the ST Package Control website -
[https://sublime.wbond.net/](https://sublime.wbond.net/)

~~~
mholt
I noticed that yesterday. Cool effect, and seems simple enough: just using CSS
transitions to change the width across a certain interval.

------
UnfalseDesign
_" Does a web page really need a loading bar, especially that the browser
already has a loading indicator of its own"_

Neither Chrome nor Firefox (at least on Windows or Linux) have an implemented
loading bar for showing a web site's progress. I cannot speak to Internet
Explorer 8 or greater because I tend to avoid them at all costs (and my
company's system only has 7).

~~~
hadem
When a page is loading under Chrome on Linux, a spinner is show in the tab
where the favicon is normally displayed. It isn't a "progress bar" but it is
an indication that the page has not fully loaded yet.

~~~
UnfalseDesign
Chrome does that spinner on Windows, too, as does Firefox. I'm glad for it but
I like the progress bar idea, personally. It gives me a sense of progress. It
is kind of like being on hold. It is the difference between "Please hold" and
"You are number 4 in line. Please hold."

Sidenote: The Amazon App Store app on Android does something similar. I've
seen other apps do this as well but I can't think of them at the moment. Is
this a design pattern we will see more of like the Ajax spinners of the Web
2.0 craze?

------
JeremyMorgan
I like it. Progress bars aren't immediately obvious, especially in a browser
like Chrome. I have watched people when doing our usability tests and they
click several times or try to reload on certain slower pages because they
can't tell anything has happened.

~~~
sdfjkl
If your browser has a non-obvious loading indicator, I'd say that's a problem
with the browser UI and should be solved there, not on websites.

~~~
zipppy
However, websites can't control what browsers their users use, nor can they
control how those browsers give feedback regarding load times.

They can control their own code.

Not saying that websites should implement this, but companies aren't going to
want to point to browsers being the problem. Every company wants to (try to)
control their users' experiences, for better or worse.

------
pubby
Seeing this on Youtube made me realize how slow the page loading really was.
Medium's is even worse: my mind processes the bar as taking a good 5 seconds,
primarily because there seems to be 3 phases of the bar moving. I don't like
it at all.

------
deanclatworthy
A colleague of mine did this for a large project we worked on which needed to
load a lot of video assets:
[http://download.kone.com/ultrarope/index.htm](http://download.kone.com/ultrarope/index.htm)

------
etler
I think it's more important to try and emulate the native browser loading
behavior first. I threw together an example with an iframe and a resource that
never completes:

[http://loadlet.herokuapp.com/](http://loadlet.herokuapp.com/)

Extra loading indicators may be nice, but I think that a native feel should
come first.

------
cleblanc
My team just released our version with turbolinks/ajax support.

[https://news.ycombinator.com/item?id=6245244](https://news.ycombinator.com/item?id=6245244)
[http://jqueryajaxloadingbar.herokuapp.com](http://jqueryajaxloadingbar.herokuapp.com)

------
shameless_1
1st Ave Machine used to have that feature, their site was (and is) rather
heavy.

They changed the website look and feel, had to look up the release date of the
video for which I first saw this UI pattern (Sixes last by Alias): 2005

Edit: site now: [http://1stavemachine.com/](http://1stavemachine.com/)

------
namenotrequired
I'm surprised outlook.com hasn't been mentioned yet, which does a similar
thing, but with flying dots.

------
anigbrowl
Saw this on Youtube last week. It's good, I guess, in that it's easy to
understand straight away. At the same time, I find it kind of useless eye
candy, and I can't interact with it. Usually when I experience a slow load I
find a ridiculously high number next the Ghostery icon.

------
cliveowen
Coincidentally I noticed this pattern just yesterday here:
[http://paulstamatiou.com/android-is-better](http://paulstamatiou.com/android-
is-better) and I really like it. The scroll bar isn't enough to tell how much
reading is left.

~~~
kamjam
_The scroll bar isn 't enough to tell how much reading is left._

I hope you're missing a </sarc> tag there...

~~~
theandym
Scrollbars are virtually non-existent on Macs these days. Plus this works well
on touch-based devices too. Overall, I like the concept and find it useful as
well.

 _Edit: I 'm referring to the reading progress bar concept, not to the loading
status referenced in the original post._

~~~
kamjam
Fair enough, and good point on the touch-based devices, I can see how it would
be useful for those. I don't use a Mac, so can't comment but same applies.

------
telepoiss
I can't recall right away what website had it but if I read a really long
article on my mobile phone, it showed a similar bar on the top but that was
showing me progress on how far I had read. As iOS hides the scroll-bar once I
stop to read, I found it a nice touch.

------
wosc
Here's a general-purpose JS implementation of a progress bar that achieves a
similar visual effect:
[http://ricostacruz.com/nprogress/](http://ricostacruz.com/nprogress/)

------
nagisa
That's a built-in feature(?) of GNOME Epiphany (as visible in
[http://www.youtube.com/watch?v=cFoEYkztAfY](http://www.youtube.com/watch?v=cFoEYkztAfY)
for example).

------
ams6110
Slowly but surely HTML5 and JavaScript are turning into Flash.

~~~
hatu
Blog post from 2014: How to create beautiful HTML5 intros to your web page.

------
mistercow
Given how much of the web is dynamically loaded now, it seems like there
really out to be a built-in API for displaying load progress to the user.

~~~
testbro
Isn't the point of dynamically loading content to reduce the perceived waiting
time though? I wonder if focus on cleanly showing the user the page is
rendering might be better placed on getting content to load faster instead.

~~~
mistercow
At the UI level, perceived time is usually more important than real time. Half
a second with nothing happening feels long. A whole second with feedback in
some form (a loading bar, a spinner, etc.) feels fast.

For longer wait times, this becomes critical. 5 seconds with no feedback feels
incredibly, ridiculously long. 5 seconds with feedback feels like completely
reasonable. I sometimes use almost entirely fake progress bars which
asymptotically approach full when I have no way to measure how long something
will take. It's bizarre, but even _knowing_ that the progress bar is fake,
watching it fill up makes the time seem shorter than staring at a spinner.

Actually improving loading time is important, of course, but the ROI is tiny
compared to basic user feedback.

------
Axsuul
There's another loading bar example on
[http://www.jellibug.com](http://www.jellibug.com)

------
benologist
I've seen this on YouTube, I actually like it but it should be in the browser
not the page.

------
baby
I don't see the ones on Medium or Youtube. I'm using Firefox on Win7.

~~~
sp0rk
They don't appear on the initial load, only when you switch between pages on
the site.

------
catilac
My old company SquidCube had this over a year ago.

