Import
import { LoadingIndicatorModule } from '@backbase/ui-ang/loading-indicator'
Usage
Use the bb-loading-indicator-ui component to display a loading spinner.
<!-- Basic loading indicator usage -->
<bb-loading-indicator-ui [inline]="true"></bb-loading-indicator-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
hasBackground |
boolean |
false |
|
inline |
boolean |
false |
|
loaderSize |
'lg' | 'md' | 'sm' |
'md' |
|
showDelay |
number |
0 |
|
text |
string |
undefined |
hasBackground
The hasBackground input adds a gray overlay background behind the loading indicator.
<!-- Loading indicator with background -->
<bb-loading-indicator-ui [hasBackground]="true"></bb-loading-indicator-ui>
inline
The inline input displays the spinner without default padding and margins for inline usage.
<!-- Inline loading indicator -->
<bb-loading-indicator-ui [inline]="true"></bb-loading-indicator-ui>
loaderSize
The loaderSize input sets the size of the loading spinner.
<!-- Large loading indicator -->
<bb-loading-indicator-ui [loaderSize]="'lg'"></bb-loading-indicator-ui>
<!-- Small loading indicator -->
<bb-loading-indicator-ui [loaderSize]="'sm'"></bb-loading-indicator-ui>
showDelay
The showDelay input sets a delay in milliseconds before the loading indicator appears.
<!-- Loading indicator with 500ms delay -->
<bb-loading-indicator-ui [showDelay]="500"></bb-loading-indicator-ui>
text
The text input displays descriptive text below the loading spinner.
<!-- Loading indicator with text -->
<bb-loading-indicator-ui [text]="'Loading...'"></bb-loading-indicator-ui>
Accessibility
The Loading Indicator component includes built-in accessibility features:
- Status role: The spinner container has role="status" to announce loading states to screen readers.
- Accessible label: The SVG spinner includes an aria-label="Loading" for screen reader users.
- Live region: The status role creates an implicit live region that announces state changes.
- Text support: Optional text provides additional context for users with assistive technologies.
The component automatically handles accessibility without requiring additional ARIA inputs from developers.