Loading distractor

The loading distractor indicates a saving or loading action.

The <dt-loading-spinner> and <dt-loading-distractor> are circular indicators of activity (e.g. loading of data). Pass in the label of the loading distractor via ng-content.

´ Loading interactive demo...
<dt-loading-distractor>Loading …</dt-loading-distractor> export class LoadingDistractorDefaultExample {} <dt-loading-distractor>Loading …</dt-loading-distractor> export class LoadingDistractorDefaultExample {}

The loading distractor always appears vertically and horizontally centered on the element, section or screen it is loading.

Imports

You have to import the DtLoadingDistractorModule when you want to use the dt-loading-distractor or dt-loading-spinner:

@NgModule({
  imports: [DtLoadingDistractorModule],
})
class MyModule {}

Accessibility

Each <dt-loading-spinner> should be given a meaningful label via aria-label or aria-labelledby. The aria-labelledby attribute of the <dt-loading-distractor> is set automatically based on the given content.

Loading spinner in use

The loading spinner consists of an anmiated SVG circle and can be used in combination with other components, e.g. a form field.

´ Loading interactive demo...
<dt-loading-spinner></dt-loading-spinner> export class LoadingDistractorSpinnerExample {} <dt-loading-spinner></dt-loading-spinner> export class LoadingDistractorSpinnerExample {}

Loading spinner inside a form field

When a <dt-loading-spinner> is placed as a prefix or suffix inside a <dt-form-field> the color and size adjust automatically.

´ Loading interactive demo...
<dt-form-field> <input type="text" dtInput placeholder="Please insert something" aria-label="Please insert something" /> <dt-loading-spinner dtPrefix></dt-loading-spinner> </dt-form-field> export class LoadingDistractorInputExample {} <dt-form-field> <input type="text" dtInput placeholder="Please insert something" aria-label="Please insert something" /> <dt-loading-spinner dtPrefix></dt-loading-spinner> </dt-form-field> export class LoadingDistractorInputExample {}

Loading spinner in buttons

If loading is caused by triggering a button, the loading distractor can be shown in the button. The button gets disabled and the loading distractor is placed left aligned in the button with a description.

Loading distractor in a button

Styles

  • x: 16px
  • y: 8px
  • Loading spinner width: 16px
  • Loading spinner height: 16px
  • Loading spinner color: same as disabled button font

Loading spinnner in comboboxes

Loading distractor in comboboxes

Styles

  • x: 12px
  • Loading spinner width: 12px
  • Loading spinner height: 12px
  • Loading spinner color: gray-500