Animated striped progress bar?

Question

Having animated stripes on a progress bar might be useful to indicate that the system is still running and the computer did not hang up.

Should the stripes be on the entire progress bar (with semi-transparent filled part) or just the filled part? and why?

the following snippet shows the entire bar animated

http://jsfiddle.net/alsadi/DjzL4/

NOTE: Bootstrap chose to the second option http://getbootstrap.com/components/#progress-animated

Answer 1

It depends. I'd show a striped progress bar while an operation is stalling or waiting. E.g. waiting for a connection or user input. Then I distinguish two cases:

1. The operation has no progress yet.
   Show the striped animation over the full length of the bar, as if progress was 100%.
2. The operation has some progress.
   Show the striped animation over only the filled part of the progress bar.

For example: the program will connect to a website, then download a file. While connecting, there is not any progress yet: full striped animation. Once connected, the file is downloaded: progress bar filling up, no striped animation. At some point the download stalls: striped animation only for the filled part of the progress bar.

---

The only advantage of animating the entire progress bar is that the animation is very visible, even when only a fraction of the progress bar is filled. A downside is that I've never seen the whole bar being animated in other applications. This may convey the wrong signal to the user. For example, a partially filled partially animated bar indicates the waiting happens at the current progress of the bar, whereas a partially filled fully animated bar indicates the bar is waiting, irrespective of the current progress.