# Loading State Use `ui-loading-state` when users need feedback that work is in progress. Choose the lightest pattern that still explains the delay: inline when content is not yet present, overlay when existing content is being refreshed, and fullscreen only for blocking transitions. ## Import ```ts import { LoadingStateComponent } from 'ui'; ``` ## Basic inline loading ```ts import { Component } from '@angular/core'; import { LoadingStateComponent } from 'ui'; @Component({ selector: 'app-loading-state-basic-demo', standalone: true, imports: [LoadingStateComponent], template: `
`, }) export class LoadingStateBasicDemoComponent {} ``` ## Loading messages and scale ```ts import { Component } from '@angular/core'; import { LoadingStateComponent } from 'ui'; @Component({ selector: 'app-loading-state-messaging-demo', standalone: true, imports: [LoadingStateComponent], template: `

Compact

Standard

Large

`, }) export class LoadingStateMessagingDemoComponent {} ``` ## Custom projected progress content ```ts import { Component } from '@angular/core'; import { LoadingStateComponent } from 'ui'; @Component({ selector: 'app-loading-state-custom-content-demo', standalone: true, imports: [LoadingStateComponent], template: `
Step 2 of 3
`, }) export class LoadingStateCustomContentDemoComponent {} ``` ## Overlay on existing card content ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, CardComponent, LoadingStateComponent } from 'ui'; @Component({ selector: 'app-loading-state-card-overlay-demo', standalone: true, imports: [ButtonComponent, CardComponent, LoadingStateComponent], template: `
{{ isLoading() ? 'Stop loading' : 'Show loading' }}
Workspace summary
Active projects: 12
Pending reviews: 4
Last sync: 2 minutes ago
`, }) export class LoadingStateCardOverlayDemoComponent { protected readonly isLoading = signal(true); protected toggleLoading(): void { this.isLoading.update(value => !value); } } ``` ## Overlay on dense lists or records ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, LoadingStateComponent } from 'ui'; @Component({ selector: 'app-loading-state-list-overlay-demo', standalone: true, imports: [ButtonComponent, LoadingStateComponent], template: `
{{ isLoading() ? 'Stop loading' : 'Reload list' }}
Quarterly report Ready
Customer import Pending
Review queue 3 items
`, }) export class LoadingStateListOverlayDemoComponent { protected readonly isLoading = signal(true); protected toggleLoading(): void { this.isLoading.update(value => !value); } } ``` ## Fullscreen blocking transitions ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, LoadingStateComponent } from 'ui'; @Component({ selector: 'app-loading-state-fullscreen-demo', standalone: true, imports: [ButtonComponent, LoadingStateComponent], template: `

Use fullscreen loading only for blocking transitions such as app bootstrap, secure redirects, or major workspace switches.

Show fullscreen loading
Keep the message short and reassuring.
Avoid fullscreen loading for small inline refreshes.
@if (showOverlay()) { } `, }) export class LoadingStateFullscreenDemoComponent { protected readonly showOverlay = signal(false); protected showDemo(): void { this.showOverlay.set(true); setTimeout(() => this.showOverlay.set(false), 2200); } } ``` ## Embedded panel or dashboard layout ```ts import { Component } from '@angular/core'; import { ButtonComponent, LoadingStateComponent, MessageBarComponent, TextComponent } from 'ui'; @Component({ selector: 'app-loading-state-panel-layout-demo', standalone: true, imports: [ButtonComponent, LoadingStateComponent, MessageBarComponent, TextComponent], template: `
Filter
Latest deployment completed
Three new comments on design review
Import queue is processing 12 files
`, }) export class LoadingStatePanelLayoutDemoComponent {} ``` ## Accessibility ### Status communication A loading state should clearly communicate that work is in progress and, when possible, what is being loaded or updated. Short messages are usually better than generic filler. ### Overlay behavior When overlay mode is used, ensure the surrounding experience still makes sense for keyboard and screen-reader users. | Mode | Guidance | | --- | --- | | Inline loading | Use when content has not appeared yet. | | Container overlay | Use when existing content is refreshing and context should remain visible. | | Fullscreen overlay | Reserve for blocking transitions that truly affect the whole page. | ### Custom projected content Projected content should add useful status context such as setup steps or progress, not duplicate the same message with more noise.