Loading distractor

The loading distractor indicates a saving or loading action. It consists of a loading spinner and a description.

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

Behavior

The loading distractor appears always vertically and horizontally centered on the element, section or screen it is loading. It is blocking all user input of the loaded object or view.

Animation

The loading distractor is animated in two parts. The whole loading spinner is rotating and the stroke length is animated as well.

Animation of the whole spinner

animation: rotate
duration: 3.4s
timing: linear

Animation of the stroke

animation: dash offset
duration: 1.7s
timing: cubic-bezier(0.645, 0.045, 0.355, 1)

Combination with other components

Loading distractor in input fields

Loading distractor in input fields
x: 12px

Loading distractor

Copy svg from groundhog and scale proportionally
width: 12px
height: 12px
color: $gray-500

Loading distractor 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 button
x: 16px
y: 8px

Loading distractor

width: 16px
height: 16px
color: same as disabled button font

Loading distractor in comboboxes

Loading distractor in comboboxes
x: 12px

Loading distractor

width: 12px
height: 12px
color: $gray-500

Loading distractor & loading spinner

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

<dt-loading-spinner> and <dt-loading-distractor> are a circular indicators of activity (eg. loading).

Progress spinner

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

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"/> <dt-loading-spinner dtPrefix></dt-loading-spinner> </dt-form-field> export class InputLoadingDistractorExampleComponent { } export class InputLoadingDistractorExampleComponent { }

Progress distractor

The <dt-loading-distractor> wraps the spinner and adds a label next to it.

Options & Properties

Name Type Default Description
ng-content string (html content) - Defines the label of the loading distractor

Accessibility

Each <dt-loading-spinner> should be given a meaningful label via aria-label or aria-labelledby. <dt-loading-distractor> will set the aria-labelledby attributes automatically.