Loaders
Loaders indicate that the content meant for a given container is taking extra time to appear.
Code
Variants
Color 1
Color 2
certara-loader
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color1 | color-1 | Accepts a CSS variable (e.g. var(--certara-red)) or a valid CSS color value (name, hex, rgb, rgba, hsl, etc.) | string | undefined |
color2 | color-2 | Accepts a CSS variable (e.g. var(--certara-yellow)) or a valid CSS color value (name, hex, rgb, rgba, hsl, etc.) | string | undefined |
fullscreen | fullscreen | boolean | false | |
size | size | Used for variant="spinner" and accepts a value of 24px, 3rem, 128px, or any other valid CSS size value. The default sizing is inherited from the parent container | string | undefined |
variant | variant | "circle" | "hexagon" | "spinner" | 'circle' |
Skeleton loaders
certara-skeleton-loader
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | "card" | "chart" | "circle" | "divider" | "headline" | "line" | "square" | "toolbar" | undefined |
In Practice
Spinners
Spinners offer visual feedback to show users an action on a page, or section of a page, is processing. Use a spinner for in-line areas of the interface like a table or list.
Skeleton Loaders
Skeleton loaders mimic the page’s layout by showing its elements in a shape similar to the actual content as it is loading and becoming available. Use skeleton loaders when:
- A spinner is not prominent enough, especially on high-traffic pages.
- When there’s more than one visible element loading at the same time.
- When data takes more than 300ms to load on an average connection.
Accessibility
- Spinners are not operable by keyboard.
- Use the title value on the spinner image for assistive technologies.
- Screen readers should register that something is “loading” or “processing” when a spinner appears on the screen.
- Users should also be made aware of status changes, such as when the content is “finished” loading or processing.
- Screen readers should be able to access the content behind skeleton loaders.
- The image replacements are for decorative presentation only and should be hidden from screen readers with aria-hidden=“true”.
For more information, see our accessibility guidelines.