import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { LoadingSpinnerComponent } from 'ui-essentials'; @Component({ selector: 'ui-loading-spinner-demo', standalone: true, imports: [CommonModule, FormsModule, LoadingSpinnerComponent], template: `

Loading Spinner Demo

Sizes

@for (size of sizes; track size) {

{{ size }}

}

Types

@for (type of types; track type) {

{{ type }}

}

Colors

@for (variant of variants; track variant) {

{{ variant }}

}

Speeds

@for (speed of speeds; track speed) {

{{ speed }}

}

With Labels

With Label

Processing

Uploading

States

Normal

Disabled

Interactive

@if (clickCount > 0) {

Spinner clicked: {{ clickCount }} times

}

Common Usage Examples

Loading Button

Page Loading

@if (pageLoading) { } @else {
Page Content

This is the loaded content.

}

Data Processing

@if (processing) { } @else {

✅ Data processed successfully!

}
`, styleUrl: './loading-spinner-demo.component.scss' }) export class LoadingSpinnerDemoComponent { sizes = ['sm', 'md', 'lg'] as const; types = ['spin', 'dots', 'pulse', 'bars'] as const; variants = ['primary', 'secondary', 'accent', 'success', 'warning', 'danger', 'info'] as const; speeds = ['slow', 'normal', 'fast'] as const; // Interactive demo state selectedSize = 'md' as const; selectedType = 'spin' as const; selectedVariant = 'primary' as const; selectedSpeed = 'normal' as const; showInteractiveLabel = false; isDisabled = false; interactiveLabel = 'Loading'; clickCount = 0; // Usage examples state isLoading = false; pageLoading = false; processing = false; handleSpinnerClick(event: MouseEvent): void { if (!this.isDisabled) { this.clickCount++; console.log('Spinner clicked', event); } } simulateLoading(): void { this.isLoading = true; setTimeout(() => { this.isLoading = false; }, 2000); } simulatePageLoad(): void { this.pageLoading = true; setTimeout(() => { this.pageLoading = false; }, 3000); } simulateProcessing(): void { this.processing = true; setTimeout(() => { this.processing = false; }, 2500); } }