A loading placeholder component that displays animated placeholder shapes while content loads.
<div nve-layout="column gap:xs align:stretch">
<nve-skeleton></nve-skeleton>
<nve-skeleton style="width: 90%"></nve-skeleton>
<nve-skeleton style="width: 80%"></nve-skeleton>
</div>
Installation
<script type="module">
import '@nvidia-elements/core/skeleton/define.js';
</script>
<div nve-layout="column gap:xs align:stretch">
<nve-skeleton></nve-skeleton>
<nve-skeleton style="width: 90%"></nve-skeleton>
<nve-skeleton style="width: 80%"></nve-skeleton>
</div>
Effect
Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.
<div nve-layout="column gap:xs align:stretch">
<nve-skeleton></nve-skeleton>
<nve-skeleton effect="pulse"></nve-skeleton>
<nve-skeleton effect="shimmer"></nve-skeleton>
</div>
Shape
Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.
<div nve-layout="column gap:xs align:stretch">
<nve-skeleton></nve-skeleton>
<nve-skeleton shape="pill"></nve-skeleton>
<nve-skeleton shape="round" style="width: 40px; height: 40px"></nve-skeleton>
</div>
Slotted
Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.
<div nve-layout="column gap:xs align:stretch">
<nve-skeleton></nve-skeleton>
<nve-skeleton effect="shimmer">slotting content will hide the skeleton</nve-skeleton>
<nve-skeleton effect="shimmer"> </nve-skeleton>
</div>
slotting content will hide the skeleton
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