The Spinner component provides a visual loading indicator to show that content is being loaded or processed.
Basic usage
<flx-spinner></flx-spinner>
Properties
size
'small' | 'medium' | 'large' | number
default:"medium"
Size of the spinner. Can use preset sizes or custom pixel value
Color of the spinner (CSS color value)
variant
'circle' | 'dots' | 'bars'
default:"circle"
Visual style of the spinner
Shows spinner with semi-transparent overlay
Optional loading message displayed below spinner
Examples
Basic spinner
With message
Custom colors
Variants
Overlay spinner
Inline spinner
Centered in container
Custom size
<flx-spinner></flx-spinner>
<flx-spinner size="small"></flx-spinner>
<flx-spinner size="medium"></flx-spinner>
<flx-spinner size="large"></flx-spinner>
<flx-spinner
message="Loading data...">
</flx-spinner>
<flx-spinner
size="large"
message="Processing your request">
</flx-spinner>
<flx-spinner color="#3b82f6"></flx-spinner>
<flx-spinner color="#10b981"></flx-spinner>
<flx-spinner color="#f59e0b"></flx-spinner>
<flx-spinner color="#ef4444"></flx-spinner>
<flx-spinner variant="circle"></flx-spinner>
<flx-spinner variant="dots"></flx-spinner>
<flx-spinner variant="bars"></flx-spinner>
<div class="container">
<h3>Content</h3>
<p>This content is behind the spinner</p>
<flx-spinner
*ngIf="isLoading"
[overlay]="true"
message="Loading...">
</flx-spinner>
</div>
export class ContentLoader {
isLoading = true;
ngOnInit() {
this.loadData();
}
async loadData() {
this.isLoading = true;
await this.dataService.fetchData();
this.isLoading = false;
}
}
<button [disabled]="saving">
<flx-spinner
*ngIf="saving"
size="small">
</flx-spinner>
<span>{{ saving ? 'Saving...' : 'Save' }}</span>
</button>
<div class="content-area">
<flx-spinner
*ngIf="loading; else content"
message="Loading content...">
</flx-spinner>
<ng-template #content>
<div class="loaded-content">
<!-- Your content here -->
</div>
</ng-template>
</div>
.content-area {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
<flx-spinner [size]="64"></flx-spinner>
<flx-spinner [size]="48"></flx-spinner>
<flx-spinner [size]="32"></flx-spinner>
Size presets
| Size | Pixels |
|---|
| small | 16px |
| medium | 24px |
| large | 48px |
Styling
flx-spinner {
--flx-spinner-color: #3b82f6;
--flx-spinner-size: 24px;
--flx-spinner-border-width: 2px;
--flx-spinner-speed: 1s;
--flx-spinner-overlay-background: rgba(255, 255, 255, 0.8);
--flx-spinner-overlay-backdrop-blur: 2px;
--flx-spinner-message-color: #6b7280;
--flx-spinner-message-margin: 12px;
}
Common patterns
Full page loading
<flx-spinner
*ngIf="appLoading"
[overlay]="true"
size="large"
message="Loading application...">
</flx-spinner>
<div *ngIf="!appLoading" class="app-content">
<!-- App content -->
</div>
Section loading
<flx-card>
<h3>User Profile</h3>
<div *ngIf="!loadingProfile; else loading">
<!-- Profile content -->
</div>
<ng-template #loading>
<flx-spinner message="Loading profile..."></flx-spinner>
</ng-template>
</flx-card>
<button
[disabled]="submitting"
(click)="onSubmit()">
<flx-spinner
*ngIf="submitting"
size="small"
style="margin-right: 8px;">
</flx-spinner>
{{ submitting ? 'Submitting...' : 'Submit' }}
</button>
Accessibility
The Spinner component provides accessibility support:
role="status" for loading indicatorsaria-label describing the loading statearia-live="polite" for screen reader announcements- Message text is announced to screen readers
Best practices
- Always show a spinner for operations taking >500ms
- Provide descriptive messages for long operations
- Use overlay spinners for full-page loading
- Use inline/button spinners for component-level loading
- Consider skeleton screens for better perceived performance
- Don’t nest multiple spinners
- Match spinner color to your brand
- Ensure adequate contrast with background
For operations that might take a long time, consider showing a progress bar or percentage instead of just a spinner.
- Message - For status messages
- Button - For buttons with loading states