Spinner¶
Spinners are visual indicators that an app is loading content or performing another process that the user needs to wait for. They provide visual feedback that the system is working but don't provide information about how long a user will have to wait.
Usage¶
Spinners can be used in many different locations, e.g. cards, lists, empty screens etc.
When to use¶
- To inform the user that something is happening.
- While handling asynchronous requests.
Best practices¶
- Use spinners only for fast actions (2–10 seconds). A users will loose patience if it takes longer than that.
- Keep loading comments concise and short.
- Make the spinner visible, e.g. with a backdrop if necessary, do not overlap with the content beneath.
- Keep the number of loading indicators on a single page to a minimum. Cluster them on a higher level (e.g. with a backdrop) if needed.
Code¶
Usage¶
import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
@Component({
imports: [SiLoadingSpinnerComponent, ...]
})
SiLoadingSpinnerComponent API Documentation¶
si-loading-spinner Input Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel ¶ | TranslatableString | $localize`:@@SI_LOADING_SPINNER.LABEL:Loading` | Needed for a11y |
| isBlockingSpinner ¶ | boolean | false | Whether the spinner blocks interaction with the surrounding content. |
| isSpinnerOverlay ¶ | boolean | false | Whether the spinner is displayed as an overlay. |
| loadingText ¶ | TranslatableString | Optional text to be displayed below the spinner. |
Spinner directive¶
You can use loading spinner directive to enable the spinner on a specific element.
Additionally, you can enable semi-transparent overlay and initial loading time for the spinner to be displayed.
SiLoadingSpinnerDirective API Documentation¶
[siLoading] Input Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| blocking ¶ | boolean | false | Displays semi-transparent backdrop for the spinner, default is false. |
| initialDelay ¶ | boolean | true | Specifies if the spinner should be displayed after a delay, default is true. |
| loadingText ¶ | TranslatableString | Optional text to be displayed below the spinner. | |
siLoading ¶ | (number | boolean) | Displays the loading spinner when the value is either true or non-zero. |
Loading button¶
Use the si-loading-button component when you need to show a loading indicator on a button. The si-loading-button is implemented as a wrapper around a normal HTML button. The most important button properties are routed through and are accessible via the wrapper.
SiLoadingButtonComponent API Documentation¶
si-loading-button Input Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel ¶ | TranslatableString | aria-label for the button | |
| ariaLabelledBy ¶ | string | aria-labelledby for the button | |
| buttonClass ¶ | string | '' | CSS class for the button. |
| disabled ¶ | boolean | false | Whether the button is disabled. |
| loading ¶ | boolean | false | Whether the loading state should be displayed. |
| type ¶ | ("button" | "reset" | "submit") | 'button' | Type of the button. |
Types Documentation¶
| Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality. |
|---|
Except where otherwise noted, content on this site is licensed under MIT License.