Skeleton

npm2.0.0

Skeleton provides a placeholder representation of content before it loads

Example

Basic skeleton loader with default rectangular shape and shimmer effect

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<bp-skeleton></bp-skeleton>

Effect

Demonstrates animation effects including shimmer (default), pulse, and sheen for different loading patterns

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div bp-layout="block gap:md">
  <bp-skeleton></bp-skeleton>
  <bp-skeleton effect="pulse"></bp-skeleton>
  <bp-skeleton effect="sheen"></bp-skeleton>
</div>

Shape

Shows rectangular and circular shapes for different content types like images or avatars

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div bp-layout="inline gap:md">
  <bp-skeleton style="--width: 200px; --height: 100px"></bp-skeleton>
  <bp-skeleton shape="circle" style="--width: 100px; --height: 100px"></bp-skeleton>
</div>

Avatar

Avatar placeholders with circular shape and pulse effect in multiple sizes using design tokens

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div bp-layout="inline gap:md">
  <bp-skeleton shape="circle" effect="pulse" style="--width: var(--bp-size-700); --height: var(--bp-size-700)"></bp-skeleton>
  <bp-skeleton shape="circle" effect="pulse" style="--width: var(--bp-size-800); --height: var(--bp-size-800)"></bp-skeleton>
  <bp-skeleton shape="circle" effect="pulse" style="--width: var(--bp-size-900); --height: var(--bp-size-900)"></bp-skeleton>
</div>

Text Lines

Text paragraph placeholder with varied line widths to simulate natural text flow

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div style="display: flex; flex-direction: column; gap: var(--bp-space-sm)">
  <bp-skeleton effect="sheen" style="--width: 100%"></bp-skeleton>
  <bp-skeleton effect="sheen" style="--width: 80%"></bp-skeleton>
  <bp-skeleton effect="sheen" style="--width: 90%"></bp-skeleton>
  <bp-skeleton effect="sheen" style="--width: 75%"></bp-skeleton>
</div>

Card Layout

Card layout pattern combining circular avatar with text lines for user profile or list item placeholders

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div style="display: flex; gap: var(--bp-space-md); padding: var(--bp-space-md); max-width: 400px">
  <bp-skeleton shape="circle" effect="pulse" style="--width: 60px; --height: 60px"></bp-skeleton>
  <div style="flex: 1; display: flex; flex-direction: column; gap: var(--bp-space-sm)">
    <bp-skeleton effect="sheen" style="--width: 40%; --height: 1.2rem"></bp-skeleton>
    <bp-skeleton effect="sheen" style="--width: 100%; --height: 1rem"></bp-skeleton>
    <bp-skeleton effect="sheen" style="--width: 75%; --height: 1rem"></bp-skeleton>
  </div>
</div>

Image Layout

Image card pattern with large image placeholder and text lines for media gallery or blog post previews

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div bp-layout="block gap:md" style="max-width: 300px">
  <bp-skeleton effect="sheen" style="--width: 100%; --height: 200px"></bp-skeleton>
  <bp-skeleton effect="sheen" style="--width: 60%; --height: 1.5rem"></bp-skeleton>
  <bp-skeleton effect="sheen" style="--width: 100%; --height: 1rem"></bp-skeleton>
  <bp-skeleton effect="sheen" style="--width: 85%; --height: 1rem"></bp-skeleton>
</div>

Custom Colors

Custom background colors using design token variables to match brand themes or specific UI contexts

code

<script type="module">
  import '@blueprintui/components/include/skeleton.js';
</script>

<div bp-layout="block gap:md">
  <bp-skeleton effect="pulse" style="--width: 100%; --height: 40px; --background: var(--bp-status-accent-background-200)"> </bp-skeleton>
  <bp-skeleton effect="pulse" style="--width: 100%; --height: 40px; --background: var(--bp-status-success-background-200)"> </bp-skeleton>
</div>

Install

NPM

// npm package
import '@blueprintui/components/include/skeleton.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/skeleton.js/+esm';
</script>

Accessibility

The skeleton component has a presentation role by default
The aria-live attribute is set to "polite" to announce loading state changes
Use skeletons to indicate that content is loading without disrupting the user's experience
Ensure that the skeleton matches the general structure and layout of the content it represents

Usage Guidelines

Use skeletons to represent loading states for various UI elements (text, images, cards, etc.)
Match the skeleton shape and size to the content it will eventually display
Use the pulse effect for subtle, ambient loading indicators
Use the sheen effect for more prominent loading states that draw attention
Use the none effect when you need static placeholder shapes
For circular content (avatars, profile pictures), use shape="circle" with equal width and height
Group multiple skeletons together to represent complex layouts during loading

bp-skeleton

Properties

Name	Types	Description
`effect`	`'pulse' \| 'sheen'`	Animation effect applied to the skeleton
`shape`	`'circle'`	Shape of the skeleton

Attributes

Name	Types	Description
`effect`	`'pulse' \| 'sheen'`	Animation effect applied to the skeleton
`shape`	`'circle'`	Shape of the skeleton

CSS Properties

Name	Types	Description
`--width`		Width of the skeleton (default: 100%)
`--height`		Height of the skeleton (default: 1rem)
`--background`		Background color of the skeleton
`--border-radius`		Border radius (controlled by shape attribute)