CSS only

Page loader

A full-screen loading overlay. SCSS-only: a fixed ng-page-loader with a blurred backdrop that centers its content.

The ng-page-loader covers the viewport (position: fixed; inset: 0) and centers whatever you drop inside — typically a Spinner. Add it while loading and remove it when done.

Preview

Shown contained here; in real use it fills the whole screen.

page-loader.html

<div class="ng-page-loader">
    <span class="ng-spinner lg" role="status" aria-label="Loading"></span>
</div>

Anatomy

ng-page-loader ng-spinner

Toggle it by injecting/removing the element (or hiding it) when your data is ready.

Reference

Generated from the component source (_ng_page_loader.scss).

Component info

Name	`Page Loader`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_page_loader.scss`

Classes

.ng-page-loader

Tokens

--ng-pl-bg --ng-pl-blur --ng-pl-color --ng-pl-z