What does the component do?
A loading indicator shows that an action or process is running in the background and users have to wait for this process to finish.
When should the component be used?
- To inform users that an action or process is running in the background.
- To cover waiting times.
- To give feedback that the application is responding to user input.
Rules
- Only use the loading indicator for actions that last longer than a short moment.
- Make sure that the loading indicator does not interfere with the layout of the page or application.
- If possible, offer a progress indicator to give users an idea of the remaining waiting time, especially for long waiting times.
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Animation | No | Verfügbar in "Red", "Smoke" und "White". Geeignet für Overlay-Einsatz |
Playground
The sbb-loading-indicator is a component which can be used to indicate progress status
or an ongoing activity which require some time to complete.
Style
It's possible to define the size of the component, choosing between s (default), l, xl, xxl, and xxxl.
<sbb-loading-indicator size="l"></sbb-loading-indicator>
Accessibility
If the sbb-loading-indicator should be announced by screen-readers, use an element with the correct aria attributes
(aria-live set to polite or assertive, and possibly aria-atomic and aria-relevant)
and then append the sbb-loading-indicator on it after giving it the correct aria-label.
<div class="loader-container" aria-live="polite">
<sbb-loading-indicator size="l" aria-label="Loading, please wait"></sbb-loading-indicator>
</div>
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
color | color | public | 'default' | 'smoke' | 'white' | 'default' | Color variant. |
size | size | public | 's' | 'l' | 'xl' | 'xxl' | 'xxxl' | 's' | Size variant, either s or m. |