SkeletonNew

Skeletons are used to provide a low fidelity representation of content before it appears in a view. This improves the perceived loading time for our users.

Open in new window

View RTL

<div class="skeleton-overview" aria-busy="true">
  <header>
    <nord-skeleton></nord-skeleton>
    <nord-skeleton></nord-skeleton>
  </header>
  <nord-skeleton></nord-skeleton>
  <nord-skeleton></nord-skeleton>
  <nord-skeleton></nord-skeleton>
  <nord-visually-hidden>Loading</nord-visually-hidden>
</div>

<style>
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-block-end: var(--n-space-s);
  }
  .skeleton-overview header nord-skeleton:last-child {
    flex: 0 0 auto;
    inline-size: 30%;
  }
  .skeleton-overview nord-skeleton {
    margin-bottom: var(--n-space-m);
  }
  .skeleton-overview nord-skeleton:nth-child(1) {
    inline-size: 3rem;
    block-size: 3rem;
    margin-inline-end: var(--n-space-m);
  }
  .skeleton-overview nord-skeleton:nth-child(3) {
    inline-size: 90%;
  }
  .skeleton-overview nord-skeleton:nth-child(4) {
    inline-size: 80%;
  }
</style>

<nord-stack aria-busy="true">
  <nord-skeleton></nord-skeleton>
  <p>None</p>

  <nord-skeleton effect="sheen"></nord-skeleton>
  <p>Sheen</p>

  <nord-skeleton effect="pulse"></nord-skeleton>
  <p>Pulse</p>
</nord-stack>

<nord-card padding="l" aria-busy="true">
  <nord-skeleton effect="sheen" class="skeleton-header" slot="header"></nord-skeleton>
  <div class="skeleton-paragraph">
    <nord-skeleton effect="sheen"></nord-skeleton>
    <nord-skeleton effect="sheen"></nord-skeleton>
    <nord-skeleton effect="sheen"></nord-skeleton>
    <nord-skeleton effect="sheen"></nord-skeleton>
    <nord-skeleton effect="sheen"></nord-skeleton>
  </div>
  <nord-visually-hidden>Loading</nord-visually-hidden>
</nord-card>

<style>
  .skeleton-header {
    width: 30%;
  }
  .skeleton-paragraph nord-skeleton {
    margin-block-end: var(--n-space-m);
    width: 90%;
  }
  .skeleton-paragraph nord-skeleton:nth-child(2) {
    width: 75%;
  }
  .skeleton-paragraph nord-skeleton:nth-child(4) {
    width: 70%;
  }
  .skeleton-paragraph nord-skeleton:last-child {
    width: 30%;
    margin-block-end: 0;
  }
</style>

<div class="skeleton-paragraph" aria-busy="true">
  <nord-skeleton></nord-skeleton>
  <nord-skeleton></nord-skeleton>
  <nord-skeleton></nord-skeleton>
  <nord-skeleton></nord-skeleton>
  <nord-skeleton></nord-skeleton>
  <nord-visually-hidden>Loading</nord-visually-hidden>
</div>

<style>
  .skeleton-paragraph nord-skeleton {
    margin-bottom: var(--n-space-m);
  }
  .skeleton-paragraph nord-skeleton:nth-child(2) {
    width: 95%;
  }
  .skeleton-paragraph nord-skeleton:nth-child(4) {
    width: 90%;
  }
  .skeleton-paragraph nord-skeleton:nth-child(5) {
    width: 50%;
  }
</style>

Properties

Property	Attribute	Description	Type	Default
`effect`	`effect`	Determines which animation effect the skeleton will use. The default is no animation.	`"pulse" \| "sheen" \| undefined`	`undefined`

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-skeleton-border-radius`	Controls how rounded the corners are, using border radius tokens.	`var(--n-border-radius)`
`--n-skeleton-color`	Controls the main color of the skeleton, using our color tokens.	`var(--n-color-border)`
`--n-skeleton-sheen-color`	Controls the sheen color of the skeleton, using our color tokens.	`var(--n-color-border-strong)`

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

Use skeleton component for dynamic content only.
Use to give the user an indication of what the page layout will be like once loaded.
Mimick the actual layout using multiple Skeleton components.
Use aria-busy="true" to indicate which area on the screen is currently loading and remove it or set it to false once loaded.

Don’t #

Don’t use Skeleton component for static content.
Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.