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 attachment
Last updated: Oct 2020