Progress Indicators

Problem

It's important to give the user an understanding that a process is taking place, so they do not assume the application is frozen.

Solution

When your solution is doing something for longer than a few hundred milliseconds, display an indicator that shows actual progress or at least that progress is being made.

Code

HTML code here
	

CSS code here
	

Why

Progress indicators let people know that the action they have taken is in progress. It's important to show them, even just after a short time.

Advanced progress indicators let users know actual proportionate progress, estimated time to completion, tell them what is going on, and also let them cancel the operation if desired. If at all possible these features should be implemented, as they provide much more transparency into the processing, which gives users more control over the situation should they change their minds.

How

There are a several feedback mechanisms within progress indicators that may be helpful to the user. As a general rule, the more, meaningful feedback provided, the better:

• The proportion of work done - this usually manifests in some sort of visual graph such as a bar that fills up, but it could be as simple as showing percentage from 0-100%. If you can't know or show the proportion of progress, show an indefinite indicator such as a spinning circle or repeating bar (as in Windows XP and Vista start up).
• The estimated time remaining - if this is possible it may be very helpful; but this rarely is 100% accurate.
• What is the application doing - if this is explained in normal human terms what is going on, that is preferred (e.g., "Now setting up your profile").
• How to cancel the operation - if it can be canceled without undesirable results, this capability should be provided. If the operation cannot be fully completed, the ability to undo the previous state would be helpful to the user, unless the user can seamlessly pick up where they left off. If it is a large operation, asking the user if they want to leave it as it is or undo what had been done to that point is an option, but only if the user can make an informed decision. When in doubt, roll back to previous state.

Examples