Pre-loader
Summary
The preloader utility (.u-preloader) adds a shimmer loading animation to components, providing visual feedback during asynchronous operations.
Example
The pre-loader utility can be added to create a loading effect when content is being loaded. Below is two similar boxes where only one is using a the preloader utility.
Classes
| Modifiers | Description | Values |
Example
Classes
Format: .u-preloader__opacity--{1-9}
| Modifiers | Description | Values |
| opacity | Sets the opacity of the preloader overlay. | 1, 2, 3, 4, 5, 6, 7, 8, 9 |
Inner Component Preloader
The .u-preloader--inner variant targets only specific inner components (.c-typography, .c-button, .c-avatar, .c-datebadge, .c-field, .c-option, .c-select) instead of the entire container. This is useful when you want to show loading states for content-rich components while keeping the container and other elements visible.
Summary
The preloader utility (.u-preloader) adds a shimmer loading animation to components, providing visual feedback during asynchronous operations.
Example
Below are examples showing the difference between the regular preloader and the inner variant. The inner variant only affects the specified components within the container.
Without Preloader
This is some sample text inside a typography component.
With Inner Preloader
This is some sample text inside a typography component.
Notice how the `.u-preloader--inner` only applies the shimmer effect to the typography and button components, while the heading and container border remain visible.
Classes
| Modifiers | Description | Values |
Inner Preloader with Multiple Components
Summary
The preloader utility (.u-preloader) adds a shimmer loading animation to components, providing visual feedback during asynchronous operations.
Example
The inner preloader can be applied to containers with multiple content components. Each supported component type will show the loading state independently.
Card Title
This is a description text that explains the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Classes
| Modifiers | Description | Values |
Inner Preloader with Form Components
Summary
The preloader utility (.u-preloader) adds a shimmer loading animation to components, providing visual feedback during asynchronous operations.
Example
The inner preloader also works with form components like `.c-option` and `.c-select`, making it useful for forms that load with initial data.
User Preferences Form
Notice how all form fields, selects, options, and buttons show the shimmer effect while the form title and container remain visible.
Classes
| Modifiers | Description | Values |