Spinner — <loading>
LoadingComponent
The inline spinner. $diameter sets its size; $fullScreen and $label are model signals, so a parent can two-way bind them.
The spinner starts stopped so the page isn’t in constant motion. Press Start, then drag the slider to change $diameter.
Page loader — $fullScreen
.full-page + [loader]
The overlay form covers its positioned ancestor. $diameter is ignored here — the size is fixed at 45 with a label, 80 without.
The page loader is position: fixed at z-index 9999, so it covers the whole viewport — not the box below. A Stop button is rendered above it, and Escape also dismisses it.
Content underneath the overlay.
Grid skeleton — $viewType 'grid'
<grid-skeleton>
The default: 4 columns and 9 rows of alternating bars. This is what table-expandable and the builders render while loading.
Card skeleton — $viewType 'card'
<card-skeleton>
columnCounts drives both the number of columns and the cards in each, so it reads as a kanban placeholder.
columnCounts [2, 1, 2, 0, 1] — note the empty fourth column.
Chart and custom — $viewType 'chart' / 'other'
<skeleton-loader>
Chart has its own preset; anything else falls through to a plain SkeletonLoader[] bar list.
$viewType 'chart' — CHART_SKELETON_CONFIG, a GridSkeletonConfig using rowSpan and colSpan
$viewType 'other' with a SkeletonLoader[] — one bar per entry
Progress bar — <base-progress-bar>
BaseProgressBarComponent
Material's mat-progress-bar in its four modes — determinate (the default), indeterminate, buffer and query — plus mode 'none', a plain CSS bar with no Material behaviour. color and height style every ...
determinate (default) — 64%
indeterminate — length unknown
buffer — 40% done, 70% buffered
query — waiting to start
none — plain CSS bar, 64%, custom colour
Where they appear — Built-in loading
$formLoading / $loading
Most components already render one of these for you, so placing them by hand is the exception.