...
When integrated to form elements (e.g. file upload), it may be placed to the right of the label\field pair. It may also be placed underneath the field depending on available screen real estate or responsive design.
<< add screnshot >>
A circular progress indicator should only be placed in the center << update when toasts are complete >> of a container or component. For example:
A circular progress indicator at the center of the screen should indicate loading all screen content (and that no interaction is possible until complete)
A circular progress indicator at the center of component, such as a button indicates the process applies to that particular item (and that interaction with the rest of the UI is possible)
<< add screenshot >>
Default State
Determinate linear progress indicators may be hidden or shown in their empty state by default depending on how important it is to convey the prior expectation that an action a lengthy operation. As an example, an archival form operation which is expected to take minutes to complete should show the linear progress indicator in its empty state to set a priori expectations for the user.
Indeterminate linear progress indicators should be hidden by default and only appear on screen when they are active. Once complete, the linear progress indicator should return to it's default state (removed from view) and in most cases replaced by the content that was loaded or post-completion message.
Circular progress indicators should be hidden by default and only appear on screen when they are active. Once complete, the circular progress indicator should return to it's default state (removed from view) in most cases replaced by the content that was loaded. In the case of integration with a component like button, the button is returned to it’s default state.
States
There are none of the traditional states such as hover, active, focused and error states for linear progress indicators as user interaction is not applicable.
...