The progress component is used to provide feedback to a user for an action or event that may have a perceptible duration. Examples being loading a full screen or portion of a screen, and submitting a form.
When possible, display an exact progress value so a user can anticipate the duration for completion. If an exact progress value is not available, the component will render itself in an indeterminate state letting the user know a process has begun.
This version of the progress component displays the exact value (e.g. time, percentage) left for the process to complete.
The determinate version can be displayed as a ring or bar.
This version of the progress component notifies the user the process has begun and is loading, but does not specify the exact value left for the process to complete.
The indeterminate version can be displayed as a ring, bar, or ellipsis.