Spinner
Loading indicators using aria-busy and data-spinner.
| Input | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'default' | 'large' | 'default' | Spinner size |
overlay | boolean | false | Overlay mode — dims child content |
Import & Usage
typescript
import { Component, signal } from '@angular/core';
import { NgOatSpinner } from '@letsprogram/ng-oat/spinner';
@Component({
selector: 'app-example',
imports: [NgOatSpinner],
template: `
<ng-oat-spinner size="large" [overlay]="loading()">
<p>Content to dim while loading...</p>
</ng-oat-spinner>
`,
})
export class ExampleComponent {
loading = signal(true);
}Sizes
html
<ng-oat-spinner size="small" />
<ng-oat-spinner />
<ng-oat-spinner size="large" />Overlay on Card
User Profile
Loading user data...
This content is dimmed while loading.
html
<ng-oat-spinner size="large" [overlay]="isLoading">
<ng-oat-card>
<ng-oat-card-header>
<h4>User Profile</h4>
</ng-oat-card-header>
<p>This content is dimmed while loading.</p>
</ng-oat-card>
</ng-oat-spinner>