1

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

Improve this question
2
  • did you ever encounter animation on the whole bar?
    – kBisla
    Jan 19, 2014 at 8:53
  • yes, I got a Chinese android mobile while it boots I see animated gray stripes that get colored from left to right
    – Muayyad Alsadi
    Jan 19, 2014 at 12:59

1 Answer 1

Reset to default
4

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.

Improve this answer
2
  • I think you're correct in separating the two pieces of communication. A partially filled progress bar communicates that the process is only part way through. An animated bar communicates that there is work being done by the system. You can communicate both or one or the other.
    – micap
    Jan 19, 2014 at 12:25
  • I'm about to pick this answer, just give us more detail about animating the entire bar like this one jsfiddle.net/alsadi/DjzL4
    – Muayyad Alsadi
    Jan 19, 2014 at 13:21

Your Answer

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

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