NGSTARTER UI

Block Loader

The Block Loader component shows a loading overlay for one specific part of the interface. Use it when a card, table, form, dialog, or other local section is busy while data loads, refreshes, or saves.

Use it for:

Local loading: Block only the section that is fetching or processing data.
Saving states: Keep a form or dialog visible while preventing interaction during save.
Clear feedback: Show a spinner with an optional short message inside the affected area.
Container positioning: Use ngsBlockLoaderContainer on the parent container when the loader should cover that block.

Do not use Block Loader for full-page route loading, skeleton placeholders, inline spinners, progress percentages, or non-blocking background work.

The NgStarter Angular Block Loader component lets you indicate that a bounded area of the UI is loading while preserving the surrounding page. Use when a panel, table, modal section, or card is refreshing independently. It includes examples for Basic block loader, Block loader in a dialog, Block loader in modal, and _modals.

Basic block loader

Use a block loader inside a positioned container when one section of the page is loading or refreshing.

Some text data for example..

Loading large data..

Block loader in a dialog

Use a block loader in a dialog when the dialog content is loading or a save action should temporarily block interaction.