Spinner¶

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.

Do's and Don'ts¶

• 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, ...]
})

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.

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.