Skeleton
Examples
Effects
Paragraphs
Avatars
Custom shapes
Custom colors
Importing
Properties
Custom Properties
Parts

Skeleton

<mo-skeleton> | MOSkeleton

Since 1.0

stable

Skeletons are used as placeholders to provide a low fidelity representation of content while it loads.

These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations.

Skeletons try not to be opinionated, as there are endless possibilities for designing layouts. Therefore, you’ll likely use more than one skeleton to create the effect you want. If you find yourself using them frequently, consider creating a template that renders them with the desired arrangement and styles.

<div class="skeleton-overview">
  <header>
    <mo-skeleton></mo-skeleton>
    <mo-skeleton></mo-skeleton>
  </header>

  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
</div>

<style>
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .skeleton-overview header mo-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
  }

  .skeleton-overview mo-skeleton {
    margin-bottom: 1rem;
  }

  .skeleton-overview mo-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }

  .skeleton-overview mo-skeleton:nth-child(3) {
    width: 95%;
  }

  .skeleton-overview mo-skeleton:nth-child(4) {
    width: 80%;
  }
</style>

import { MOSkeleton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .skeleton-overview header mo-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
  }

  .skeleton-overview mo-skeleton {
    margin-bottom: 1rem;
  }

  .skeleton-overview mo-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }

  .skeleton-overview mo-skeleton:nth-child(3) {
    width: 95%;
  }

  .skeleton-overview mo-skeleton:nth-child(4) {
    width: 80%;
  }
`;

const App = () => (
  <>
    <div className="skeleton-overview">
      <header>
        <MOSkeleton />
        <MOSkeleton />
      </header>

      <MOSkeleton />
      <MOSkeleton />
      <MOSkeleton />
    </div>

    <style>{css}</style>
  </>
);

Examples

Effects

There are two built-in effects, sheen and pulse. Effects are intentionally subtle, as they can be distracting when used extensively. The default is none, which displays a static, non-animated skeleton.

None Sheen Pulse

<div class="skeleton-effects">
  <mo-skeleton effect="none"></mo-skeleton>
  None

  <mo-skeleton effect="sheen"></mo-skeleton>
  Sheen

  <mo-skeleton effect="pulse"></mo-skeleton>
  Pulse
</div>

<style>
  .skeleton-effects {
    font-size: var(--mo-font-size-small);
  }

  .skeleton-effects mo-skeleton:not(:first-child) {
    margin-top: 1rem;
  }
</style>

import { MOSkeleton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .skeleton-effects {
    font-size: var(--mo-font-size-small);
  }

  .skeleton-effects mo-skeleton:not(:first-child) {
    margin-top: 1rem;
  }
`;

const App = () => (
  <>
    <div className="skeleton-effects">
      <MOSkeleton effect="none" />
      None
      <MOSkeleton effect="sheen" />
      Sheen
      <MOSkeleton effect="pulse" />
      Pulse
    </div>

    <style>{css}</style>
  </>
);

Paragraphs

Use multiple skeletons and some clever styles to simulate paragraphs.

<div class="skeleton-paragraphs">
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
</div>

<style>
  .skeleton-paragraphs mo-skeleton {
    margin-bottom: 1rem;
  }

  .skeleton-paragraphs mo-skeleton:nth-child(2) {
    width: 95%;
  }

  .skeleton-paragraphs mo-skeleton:nth-child(4) {
    width: 90%;
  }

  .skeleton-paragraphs mo-skeleton:last-child {
    width: 50%;
  }
</style>

import { MOSkeleton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .skeleton-paragraphs mo-skeleton {
    margin-bottom: 1rem;
  }

  .skeleton-paragraphs mo-skeleton:nth-child(2) {
    width: 95%;
  }

  .skeleton-paragraphs mo-skeleton:nth-child(4) {
    width: 90%;
  }

  .skeleton-paragraphs mo-skeleton:last-child {
    width: 50%;
  }
`;

const App = () => (
  <>
    <div className="skeleton-paragraphs">
      <MOSkeleton />
      <MOSkeleton />
      <MOSkeleton />
      <MOSkeleton />
      <MOSkeleton />
    </div>

    <style>{css}</style>
  </>
);

Avatars

Set a matching width and height to make a circle, square, or rounded avatar skeleton.

<div class="skeleton-avatars">
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
  <mo-skeleton></mo-skeleton>
</div>

<style>
  .skeleton-avatars mo-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
  }

  .skeleton-avatars mo-skeleton:nth-child(1) {
    --border-radius: 0;
  }

  .skeleton-avatars mo-skeleton:nth-child(2) {
    --border-radius: var(--mo-border-radius-medium);
  }
</style>

import { MOSkeleton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .skeleton-avatars mo-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: .5rem;
  }

  .skeleton-avatars mo-skeleton:nth-child(1) {
    --border-radius: 0;
  }

  .skeleton-avatars mo-skeleton:nth-child(2) {
    --border-radius: var(--mo-border-radius-medium);
  }
`;

const App = () => (
  <>
    <div className="skeleton-avatars">
      <MOSkeleton />
      <MOSkeleton />
      <MOSkeleton />
    </div>

    <style>{css}</style>
  </>
);

Custom shapes

Use the --border-radius custom property to make circles, squares, and rectangles. For more complex shapes, you can apply clip-path to the indicator part. Try Clippy if you need help generating custom shapes.

<div class="skeleton-shapes">
  <mo-skeleton class="square"></mo-skeleton>
  <mo-skeleton class="circle"></mo-skeleton>
  <mo-skeleton class="triangle"></mo-skeleton>
  <mo-skeleton class="cross"></mo-skeleton>
  <mo-skeleton class="comment"></mo-skeleton>
</div>

<style>
  .skeleton-shapes mo-skeleton {
    display: inline-flex;
    width: 50px;
    height: 50px;
  }

  .skeleton-shapes .square::part(indicator) {
    --border-radius: var(--mo-border-radius-medium);
  }

  .skeleton-shapes .circle::part(indicator) {
    --border-radius: var(--mo-border-radius-circle);
  }

  .skeleton-shapes .triangle::part(indicator) {
    --border-radius: 0;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
  }

  .skeleton-shapes .cross::part(indicator) {
    --border-radius: 0;
    clip-path: polygon(
      20% 0%,
      0% 20%,
      30% 50%,
      0% 80%,
      20% 100%,
      50% 70%,
      80% 100%,
      100% 80%,
      70% 50%,
      100% 20%,
      80% 0%,
      50% 30%
    );
  }

  .skeleton-shapes .comment::part(indicator) {
    --border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }

  .skeleton-shapes mo-skeleton:not(:last-child) {
    margin-right: 0.5rem;
  }
</style>

import { MOSkeleton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .skeleton-shapes mo-skeleton {
    display: inline-flex;
    width: 50px;
    height: 50px;
  }

  .skeleton-shapes .square::part(indicator) {
    --border-radius: var(--mo-border-radius-medium);
  }

  .skeleton-shapes .circle::part(indicator) {
    --border-radius: var(--mo-border-radius-circle);
  }

  .skeleton-shapes .triangle::part(indicator) {
    --border-radius: 0;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
  }

  .skeleton-shapes .cross::part(indicator) {
    --border-radius: 0;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  }

  .skeleton-shapes .comment::part(indicator) {
    --border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }

  .skeleton-shapes mo-skeleton:not(:last-child) {
    margin-right: .5rem;
  }
`;

const App = () => (
  <>
    <div className="skeleton-shapes">
      <MOSkeleton className="square" />
      <MOSkeleton className="circle" />
      <MOSkeleton className="triangle" />
      <MOSkeleton className="cross" />
      <MOSkeleton className="comment" />
    </div>

    <style>{css}</style>
  </>
);

Custom colors

Set the --color and --sheen-color custom properties to adjust the skeleton’s color.

<mo-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></mo-skeleton>

import { MOSkeleton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .skeleton-avatars mo-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: .5rem;
  }

  .skeleton-avatars mo-skeleton:nth-child(1) {
    --border-radius: 0;
  }

  .skeleton-avatars mo-skeleton:nth-child(2) {
    --border-radius: var(--mo-border-radius-medium);
  }
`;

const App = () => <MOSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/skeleton/skeleton.js';

To import this component as a React component:

import MOSkeleton from '@metsooutotec/modes-web-components/dist/react/skeleton/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/skeleton/skeleton.js"></script>

Properties

Name	Description	Reflects	Type	Default
`effect`	Determines which effect the skeleton will use.		`'pulse' \| 'sheen' \| 'none'`	`'none'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--border-radius`	The skeleton’s border radius.
`--color`	The color of the skeleton.
`--sheen-color`	The sheen color when the skeleton is in its loading state.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s internal wrapper.
`indicator`	The skeleton’s indicator which is responsible for its color and animation.

Learn more about customizing CSS parts.

Ask Rocky (Beta)