Progress Indicators

In general, users expect an app’s response time to be immediate. An immediate response time is less than 1 second. If they don’t get any visual feedback after a second, they start to worry.

If you have a process that takes longer than a second, you should display a progress indicator. This lets users know that the app is loading which will ease their worries.

Progress Bar

Use a linear progress bar if a process takes longer than 4 seconds to load. Users are more willing to tolerate a long wait time if they see a linear progress bar. This is because it sets a clear expectation of the load time.

The linear bar allows the user to see that progress is being made which encourages them to wait.

If the user sees a spinner, they can’t see any progress and don’t know if their action was even processed. This gives them no incentive to wait.

Reference: http://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/

Indeterminate

Use an indeterminate indicator when the time required is unknown.

Contextual Alternatives

Indicators provide more meaningful feedback in particular contexts by showing state classes, which provide visual cues to signal: info, success, warning, and danger.

Stacked

Linear progress bars can be stacked to indicate the status of multiple steps.

Spinner

Use a spinner if the process takes less than 4 seconds to load. This visual indicator lets the user know that the app is loading.

Most users’ tolerable wait time is 4 seconds. This means that their behavioral intentions begin to change after 4 seconds.

Contextual Alternatives

Indicators provide more meaningful feedback in particular contexts by showing state classes, which provide visual cues to signal: info, success, warning, and danger.