OLYSENSE Design System

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

  <ods-skeleton></ods-skeleton>
  <ods-skeleton></ods-skeleton>
  <ods-skeleton></ods-skeleton>
</div>

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

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

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

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

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

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

import { OdsSkeleton } from '@ods/components/react.skeleton';

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

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

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

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

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

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

const Example = () => {
  return (
    <>
      <div className="skeleton-overview">
        <header>
          <OdsSkeleton />
          <OdsSkeleton />
        </header>

        <OdsSkeleton />
        <OdsSkeleton />
        <OdsSkeleton />
      </div>

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

export default Example;

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">
  <ods-skeleton effect="none"></ods-skeleton>
  None

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

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

<style>
  .skeleton-effects {
    font-size: var(--ods-sys-font-size-sm);
  }

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

import { OdsSkeleton } from '@ods/components/react.skeleton';

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

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

const Example = () => {
  return (
    <>
      <div className="skeleton-effects">
        <OdsSkeleton effect="none" />
        None
        <OdsSkeleton effect="sheen" />
        Sheen
        <OdsSkeleton effect="pulse" />
        Pulse
      </div>

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

export default Example;

Use multiple skeletons and some clever styles to simulate paragraphs.

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

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

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

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

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

import { OdsSkeleton } from '@ods/components/react.skeleton';

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

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

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

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

const Example = () => {
  return (
    <>
      <div className="skeleton-paragraphs">
        <OdsSkeleton />
        <OdsSkeleton />
        <OdsSkeleton />
        <OdsSkeleton />
        <OdsSkeleton />
      </div>

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

export default Example;

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

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

<style>
  .skeleton-avatars ods-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: var(--ods-sys-space-16);
  }

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

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

import { OdsSkeleton } from '@ods/components/react.skeleton';

const css = `
  .skeleton-avatars ods-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: var(--ods-sys-space-16);
  }

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

  .skeleton-avatars ods-skeleton:nth-child(2) {
    --border-radius: var(--ods-sys-border-radius-md);
  }
`;

const Example = () => {
  return (
    <>
      <div className="skeleton-avatars">
        <OdsSkeleton />
        <OdsSkeleton />
        <OdsSkeleton />
      </div>

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

export default Example;

Importing

import '@ods/components/web.skeleton';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Reflects	Type	Default
effect		'pulse' \| 'sheen' \| 'none'	'none'

Parts

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

Skeleton

Examples

Basic

Effects

Paragraphs

Shapes

Importing

Properties

Parts