Why do progress bars animate backwards?

Question

Gmail's new loading bar drew my attention to this today:

The colored pattern inside the bar animates from right to left.

The Mac OS progress bars do the same:

Is there a reason for this? If I was asked to animate a progress bar I'd automatically do it the other way, so I'm assuming it must have been a conscious decision.

Update

I recently read an article that included other ways of making a progress bar appear faster to users:

1. Increase the Number of Pulsations - “The progress bar with increasing pulsation was more likely to be perceived as having a shorter duration”

2. Accelerate the Progress and Avoid Pauses at the End - Progress bars “with the fastest progress occurring near the end of the process” were perceived faster than progress bars “with pauses near the process conclusion”

Answer 1

Studies have shown it looks faster and in UX perception is everything ;)

A study (PDF)[1] demonstrates that animations can increase the perceived speed of a download by up to 11% over a bar that is not animated. Having a reverse-animated background as in the Gmail loading bar, or having the background pulse faster as the bar nears completion, both create this effect. There is a video demonstrating the animations and summarizing the article.

[1] Harrison, C., Yeo, Z., & Hudson, S.E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentation. Proceedings of Computer-Human Interaction.

Answer 2

This took forever to make using Image Ready. lol


Going forward:

Going backward:

When the spiral is going against the bar direction, it does visually exagerate the speed of the bar movement.

The bars are pretty close to each other, so hide one with your palm and look only one at time. :)

Answer 3

This is an assumption, but it's likely because it makes the progress bar appear to fill more rapidly.

This effect is achieved because the right edge of the bar, the consequential part, is moving in the opposite direction from the animation, thereby making the increments that bar edge moves appear larger than they do relative to the box containing the filling bar.

Answer 4

In addition to the perceived-speed reason offered by the other answers, this interior-pattern animation also makes sense at another logical/analogical level.

The example progress bars are animating in two ways: (1) the area representing progress is widening, with its right-edge moving to the right; and (2) the colored pattern inside is shifting, right-to-left (the 'opposite' direction).

Animation (1) serves to indicate overall progress – and while that edge is noticeably moving, it also indirectly confirms that something is happening.

Animation (2) serves to show that something is happening even when the overall progress-level may seem stuck, or moving imperceptibly.

In that sense, animation (2) is more like a spinner: its motion is not a magnitude indicator (of either rate or absolute progress) but a confirmation, while it is moving at all, that something is ongoing.

Now, why does a spinner usually move clockwise? Because our experience with clock hands strongly associates that rotation with the progress of time.

Similarly, the 'crawling' animation (2) leans on our experience (at least for readers of left-to-right languages) that following a line of text to its conclusion causes the text to move from right-to-left under our gaze. The same goes for a typically-rendered timeline, where later periods are notched to the right. Reviewing it from past to future makes its ticks move right-to-left in our vision. (The same is also common for chronologically-ordered photo-albums which animate photos in and out: moving to later photos sends the earlier photos off to the left while later photos enter from the right, as if on one long filmstrip.)

The widening bar itself is thus a sort of window onto an abstract surface; the fact that the textured surface is moving right-to-left indicates moving towards the future/completion. (The fact that this animation, contrasted against the rightmost edge of the progress bar, also tends to make that magnitude-edge look like it's moving rightward even when it's temporarily halted is another visual bonus.)

You will occasionally see 'crawler' activity-indicators that don't even try to indicate overall progress via growing width. They just have a fixed-size rectangle of candy-striping or other texture. That interior pattern often also moves right-to-left, as if scanning text or other linear media... but also sometimes moves the other way, as if rolling/drilling something forward. (I suspect that it is when people view the texture as representing their busy worker-agents, rather than scanned subject matter, that they see left-to-right as progress. For example, the mental model may be one shared with side-scrolling games that start on the left and move right. The character moves right, the background moves left.)

Answer 5

Beside making it look like the bar progresses faster, I think the main reason is so the user can tell the page/application is still working. The moving bar basically tells the user that the application is working in the background and not stuck.

If a progress bar is not animated and hasn't moved in some time, the user might thing the application is "not responding". This typically occurs when a programmer is using the UI thread to perform a task (which is bad practice).

Answer 6

I thought of it as an Archimedes screw, or like the propeller shaft of a submarine.

Kind of pushes the submarine forward.