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.
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 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 comboboxes
Loading distractor & loading spinner
<dt-loading-distractor> are a circular indicators of activity (eg. loading).
Inside a Form-field
<dt-loading-spinner> is placed as a prefix or suffix inside a
<dt-form-field> the color and size adjust automatically.
<dt-loading-distractor> wraps the spinner and adds a label next to it.
Options & Properties
||Defines the label of the loading distractor|
<dt-loading-spinner> should be given a meaningful label via
<dt-loading-distractor> will set the aria-labelledby attributes automatically.