Spinner
Shows a Loading spinner to indicate that the app is busy or the page is still loading.
import { Component } from '@angular/core';
import { HlmSpinner } from '@spartan-ng/helm/spinner';
@Component({
selector: 'spartan-spinner-preview',
imports: [HlmSpinner],
template: `
<hlm-spinner />
`,
})
export class SpinnerPreview {}Installation
npx nx g @spartan-ng/cli:ui spinner
ng g @spartan-ng/cli:ui spinner
Usage
import { HlmSpinnerComponent } from '@spartan-ng/helm/spinner';<hlm-spinner class="size-8 md:size-10" />Helm API
HlmSpinner
Selector: hlm-spinner
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | size-8 | - |
Examples
Sizes
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmSpinner } from '@spartan-ng/helm/spinner';
@Component({
selector: 'spartan-spinner-size-preview',
imports: [HlmSpinner],
template: `
<div class="flex flex-col items-center gap-4">
<hlm-spinner class="size-6" />
<hlm-spinner class="size-8" />
<hlm-spinner class="size-10" />
<hlm-spinner class="size-12" />
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SpartanSpinnerSizePreviewComponent {}