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
.
<dt-loading-distractor>Loading …</dt-loading-distractor>
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.
<dt-loading-spinner aria-label="Waiting for something"></dt-loading-spinner>
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.
<dt-form-field>
<input
type="text"
dtInput
placeholder="Please insert something"
aria-label="Please insert something"
/>
<dt-loading-spinner dtPrefix aria-label="Waiting for input">
</dt-loading-spinner>
</dt-form-field>
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.
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
Styles
- x: 12px
- Loading spinner width: 12px
- Loading spinner height: 12px
- Loading spinner color: gray-500