The indeterminate progress bar shows that a process is happening, but there's an unspecified amount of wait time.

The determinate progress bar displays how long a process will take. They are used when the progress is very fast or when the progress is changes from unknown to known. The determinate progress bar always plays from 0 - 100% before exiting the frame.

If the action take less then 200 milliseconds to load content, no loading state is needed.

If the action takes longer than 200ms the determinate bar is shown for 700ms.

At 700ms we decide to either exit the animation or...

...run the Indeterminate state.

When the app knows what content to load the indeterminate progress indicator changes to a determinate progress indicator.

If there is an unusual long wait time due to poor connection reassuring copy will appear on screen after approximately 5000ms.

The Progress spinner should be used to add reassurance when the user is executing long and/or stressful tasks. Stressful tasks can include situations like, uploading documents, sending money or retrieving card details. To find out more on when to use progress spinners click here.

The progress bar should be used when the user is performing generic tasks that usually load fast. Generic tasks can include situations like, loading content following navigation or loading data in back ground after an action has been performed.

A progress bar can be placed at the top of bottom sheets centred.

Tapestry 05

Tapestry 08