Page Loader is a full-screen version of the progress-ring component, for use when the page should remain unusable as the loader displays.
<nve-page-loader></nve-page-loader>
Installation
<script type="module">
import '@nvidia-elements/core/page-loader/define.js';
</script>
<nve-page-loader></nve-page-loader>
nve api.get nve-page-loader
Interactive
Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.
<nve-button id="loader-btn">trigger loader</nve-button>
<nve-page-loader hidden></nve-page-loader>
<script type="module">
let loader = document.querySelector("nve-page-loader");
let btn = document.querySelector("#loader-btn");
btn.addEventListener("click", () => (loader.hidden = false));
</script>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days