Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Screen Loader

Screen Loader shows a full-screen blocking loading state when the user must wait and should not interact with the app.

Use it for initial app load, major route or page data loading, account switching, tenant switching, auth or session restore, heavy backend tasks, and large global operations.

Use ScreenLoaderService for programmatic overlays and always close the returned ref when the operation finishes. Use the component directly only when the opened state is controlled in a template.

Do not use Screen Loader for local block, card, table, or form loading. Use BlockLoader, Skeleton, ProgressSpinner, ProgressBar, PageLoadingBar, or component-specific loading states instead.

Key Features:
  • Full-screen Overlay: Blocks user interaction while loading.
  • Service-driven: Easily controlled from any part of the application.
  • Custom Content: Supports text messages or custom TemplateRefs.
  • Consistent UI: Integrated with the project's design system and progress bar.

The NgStarter Angular Screen Loader component lets you show a full-screen blocking loading state for large global operations. Use ScreenLoader when the user must wait and should not interact with the app: initial app load, major route or page data loading, account switching, tenant switching, auth or session restore, heavy backend tasks, and large global operations. It includes examples for Basic screen loader.

Basic screen loader

Use a screen loader when a global operation blocks the app and must be closed after completion.