Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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.