Circle loader
A circle loading spinner is used within a component to denote that a process is running asynchronously or a form is being submitted.
Button loader
Some actions may not be instant and require the system to process the action. Common places where this may be used are saving changes to an item, submitting a form, or selecting a resource that’s stored in the system—like a template.
In cases where the process is resolved and the user remains within the same interface, a success toast should appear, confirming the process is completed. The button should enter a disabled state until additional changes are made, enabling the button and allowing the user to save again.
Example
Input loader
For typeahead selects or inputs, there depending on the size of the items returns, there may be a period of asynchronous loading. This is indicated by the loading spinner in the far right of the input, and paired with a select dropdown that indicates the state (‘loading…’).
Example
Logo loader
A logo loader is used when the full page UI must be rendered, for instance loading the Journey Studio from the Journey Index page. It uses our diamond Logo variant, in SVG format, as the base for the spinner.
The spinner should be centered horizontally and vertically within the container that is loading.
Example
Skeleton
Skeleton body text
Skeleton body text provides a low fidelity placeholder of body and subtitle text being fetched before it is rendered on the page.
Individual cells loading
Individual cells loaded
Skeleton heading text
Skeleton heading text provides a low fidelity placeholder of the heading text being fetched before it is rendered on the page.
Card loading
Card loaded
Skeleton thumbnail
Skeleton thumbnail provides a low fidelity placeholder of an image being fetched before it is rendered on the page.
Thumbnail loading
Thumbnail loaded
Guidelines
Spinners
The spinner should be used to indicate loading within a component or container, especially when the layout of the fetched results can change depending on what's being loaded.
Some examples include...
- Loading the contents of the different types of Workflow nodes inside the Workflows Studio Drawer.
- Loading within a widget on the Dashboard
Skeletons
Skeleton content will vary based on content it is previewing:
- Skeleton body text provides a low fidelity placeholder of body and subtitle text being fetched before it is rendered on the page.
- Skeleton heading text provides a low fidelity placeholder of the heading text being fetched before it is rendered on the page.
- Skeleton thumbnail provides a low fidelity placeholder of an image being fetched before it is rendered on the page.
Skeleton content consist of:
- Size - The height and width of the skeleton content can be specified. Height should match size of the text. If width is not specified it should fill the container
- Lines (for text)- Number of lines to display
- Shape (for thumbnails)- Shape of the image can be specified as round or rectangular
- Animation - A shimmer animation will be to the skeleton preview to indicate progress to the user ex: https://codepen.io/joshuawo/pen/QWNJJzW
Skeleton component should:
- Stretch to fill the width of the cell or container
- Not replace static content like titles or headers
Examples
Accessibility
- The Spinner should have a label or alt text indicating what's happening (e.g. "Loading", "Processing", "Scheduling", ...)