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

Gmail loading bar

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

The Mac OS progress bars do the same:

Mac OS progress bar

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.


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”

  • 9
    @MFrank2012: the animation inside the progress bar goes right to left. (The blue color gradient changes.) Commented Mar 8, 2012 at 22:30
  • 5
    This is a GREAT UX question. If I ever make a progress bar, it will have this feature. Commented Mar 8, 2012 at 22:34
  • 6
    I was actually thinking about this today and logged on SE to ask this very question. Kudos to you.
    – Sonic42
    Commented Mar 9, 2012 at 1:04
  • 3
    If you have a look at windows 7 progress bar, its animated forwards, a light glow hits right (incomplete) end of of green bar from left, and you will notice each time this happens it gives user a perception that progress bar filled up by a small step. This is incredibly useful in systems where people are used to see slow and frozen progress bars. (This is just an observation. No offence meant to anyone.)
    – user117
    Commented Sep 24, 2012 at 10:10
  • 4
    The "backwards" turning bar looks to me like a drill grinding the hole left-to-right, and moving "drilldust" right-to-left
    – Lenne
    Commented Jun 13, 2013 at 9:44

6 Answers 6


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.

  • 52
    Could you summarize the studies? We're trying to prevent long-term link rotting.
    – dnbrv
    Commented Mar 8, 2012 at 18:23
  • 4
    So my ass-umption made an ass of no-one! Awesome.
    – msanford
    Commented Mar 8, 2012 at 19:15
  • 2
    Or, if you don't want to summarize, you could at least give full citations?
    – SamB
    Commented Mar 8, 2012 at 19:38
  • 7
    No need to summarize a study. Just think for a second... The main anchor point is the front of the progress. A reverse animation makes your brain create mini anchor points from the animation. Because mini anchor points move left and the progress moves right, it seems like the distance is getting larger. Hence, the bar appears to be moving faster. Commented Mar 8, 2012 at 22:50
  • 5
    good job on showing the study. science trumps common sense a lot of times and sometimes they are congruent. point is you need to have science to back it up. Commented Mar 9, 2012 at 3:01

This took forever to make using Image Ready. lol

Going forward:

enter image description here

Going backward:

enter image description here

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. :)

  • 17
    Great example - makes a lot of sense. Commented Mar 11, 2012 at 12:57
  • 5
    Wow! wonderful. Presented very cleverly.
    – Ashwin
    Commented Jul 22, 2012 at 9:54
  • 31
    wow...the time they spent trying to trick people...they could have just made the actual code faster.... hilarious
    – user16832
    Commented Aug 1, 2012 at 22:52
  • 4
    +1 Perhaps the best way to answer the question, not just the right answer.
    – Kris
    Commented Sep 24, 2012 at 11:36
  • 8
    @HiroProtagonist Depending on the task, even the most efficient code can take some time to execute.
    – jobukkit
    Commented Jul 9, 2013 at 17:43

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.


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.)

  • I think the point "it shows the page hasn't frozen" is perhaps understated here, as it's the most likely truth, at least as far as Google is concerned. Commented Mar 14, 2017 at 7:12

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).

  • 1
    That's the correct answer - it just to tell you that the system is still working.
    – SteveD
    Commented May 28, 2019 at 9:03

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

something like this

Kind of pushes the submarine forward.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.