Content Comparison

...

When integrated to form elements (such as file upload), it may be placed to the right of the field it relates to. It may also be placed underneath the field depending on available space or responsive design.

A circular progress indicator should be placed in the center of a container or component. For example: A circular progress indicator at the center of the screen should indicate that the screen content is loading, and that no interaction is possible until the process is completed. A circular progress indicator at the center of component, such as a widget or a card, indicates that the process applies to that particular item, and that interaction with the rest of the UI is possible. In a Toast message if a progress indicator is needed, it will replace the Toast status icon.

Image Added

Default State

• Determinate linear progress indicators may be hidden or shown in their empty state by default. When shown, they can indicate that an action may be a lengthy operation. For example, a form submission which is expected to take several minutes to complete should show the linear progress indicator in its empty state to set the user’s expectations.

• Indeterminate linear progress indicators should be hidden by default and only appear once active. On completion, the linear progress indicator should be hidden again, and in most cases replaced by the content that was loaded or a post-completion message.

• Circular progress indicators should be hidden by default and only appear once active. On completion, the circular progress indicator should be hidden again, and in most cases replaced by the content that was loaded. In the case of integration with a component such as a button, the button is returned to its default state.

...