Loading and progress

Loading overview

The loading component should be used when providing a user with the indication that a task is in progress, such as submitting data. Additionally, custom messages can be added to inform users what is happening. In order to indicate the exact progress of a task, use the progress component.


Variations

  • Local - Centers the loading animation within the parent element
  • Global - For loading events that affect the entire viewport, like the initial rendering of a page. Renders the loading animation in the center of the viewport, above all other content
  • Inline - For loading events on particular actions, like after clicking a button. Aligned inline with its siblings

Last updated: Oct 2020

Progress overview

The progress component should be used when providing feedback to a user on the exact progress of some loading event, and takes a value from 0-100 that indicates that progress. If you are only looking to indicate that a process is in progress and do not want to display how far along that progress is, use the loading component.


Variations

  • Bar - Default variation
  • Ring - Typically used on regions that are square or circular in shape, such as in place of filetype icons when loading an attachmentLoading progress ring example

Last updated: Oct 2020