Skeleton

Animated placeholder elements that indicate loading content. Reduces perceived wait time and prevents layout shift when data arrives.

Basic Elements

Core building blocks for creating skeleton layouts.

HTML

<div class="focus-skeleton focus-skeleton-text" style="width: 100%;"></div>
<div class="focus-skeleton focus-skeleton-text" style="width: 80%;"></div>
<div class="focus-skeleton focus-skeleton-text" style="width: 60%;"></div>

Shape Types

Different shapes for various content types.

Avatar

Avatar Large

Heading

Button

HTML

<!-- Avatar -->
<div class="focus-skeleton focus-skeleton-avatar"></div>

<!-- Avatar Large -->
<div class="focus-skeleton focus-skeleton-avatar-lg"></div>

<!-- Heading -->
<div class="focus-skeleton focus-skeleton-heading"></div>

<!-- Button -->
<div class="focus-skeleton focus-skeleton-button"></div>

Image Placeholders

Aspect-ratio containers for image loading states.

Square (1:1)

Video (16:9)

Portrait (3:4)

HTML

<!-- Square (1:1) -->
<div class="focus-skeleton focus-skeleton-image focus-skeleton-image-square"></div>

<!-- Video (16:9) -->
<div class="focus-skeleton focus-skeleton-image focus-skeleton-image-video"></div>

<!-- Portrait (3:4) -->
<div class="focus-skeleton focus-skeleton-image focus-skeleton-image-portrait"></div>

Animation Styles

Choose the animation that fits your design.

Shimmer (default)

Pulse

Wave

Static (no animation)

HTML

<!-- Shimmer (default) -->
<div class="focus-skeleton focus-skeleton-text"></div>

<!-- Pulse -->
<div class="focus-skeleton focus-skeleton-pulse focus-skeleton-text"></div>

<!-- Wave -->
<div class="focus-skeleton focus-skeleton-wave focus-skeleton-text"></div>

<!-- Static (no animation) -->
<div class="focus-skeleton focus-skeleton-static focus-skeleton-text"></div>

Rounded Variants

Adjust corner radius to match your UI elements.

Default

Rounded

Pill

HTML

<!-- Default -->
<div class="focus-skeleton focus-skeleton-button"></div>

<!-- Rounded -->
<div class="focus-skeleton focus-skeleton-rounded focus-skeleton-button"></div>

<!-- Pill -->
<div class="focus-skeleton focus-skeleton-pill focus-skeleton-button"></div>

Pre-built Patterns

Ready-to-use skeleton layouts for common UI patterns.

User Row

Avatar with name and metadata—perfect for lists, comments, or mentions.

HTML

<div class="focus-skeleton-user">
  <div class="focus-skeleton focus-skeleton-avatar"></div>
  <div class="focus-skeleton-user-info">
    <div class="focus-skeleton focus-skeleton-user-name"></div>
    <div class="focus-skeleton focus-skeleton-user-meta"></div>
  </div>
</div>

List Items

Icon and text combination for menu items or navigation.

HTML

<div class="focus-skeleton-list-item">
  <div class="focus-skeleton focus-skeleton-icon"></div>
  <div class="focus-skeleton focus-skeleton-text"></div>
</div>
<div class="focus-skeleton-list-item">
  <div class="focus-skeleton focus-skeleton-icon"></div>
  <div class="focus-skeleton focus-skeleton-text"></div>
</div>
<div class="focus-skeleton-list-item">
  <div class="focus-skeleton focus-skeleton-icon"></div>
  <div class="focus-skeleton focus-skeleton-text"></div>
</div>

Table Rows

Multi-column layout for data tables.

HTML

<div class="focus-skeleton-table-row">
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 0.5;"></div>
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 1.5;"></div>
  <div class="focus-skeleton focus-skeleton-table-cell"></div>
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 0.7;"></div>
</div>
<div class="focus-skeleton-table-row">
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 0.5;"></div>
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 1.5;"></div>
  <div class="focus-skeleton focus-skeleton-table-cell"></div>
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 0.7;"></div>
</div>
<div class="focus-skeleton-table-row">
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 0.5;"></div>
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 1.5;"></div>
  <div class="focus-skeleton focus-skeleton-table-cell"></div>
  <div class="focus-skeleton focus-skeleton-table-cell" style="flex: 0.7;"></div>
</div>

Form Fields

Label and input combinations for form loading states.

HTML

<div class="focus-skeleton-form-group">
  <div class="focus-skeleton focus-skeleton-label"></div>
  <div class="focus-skeleton focus-skeleton-input"></div>
</div>
<div class="focus-skeleton-form-group">
  <div class="focus-skeleton focus-skeleton-label" style="width: 80px;"></div>
  <div class="focus-skeleton focus-skeleton-input"></div>
</div>
<div class="focus-skeleton focus-skeleton-button" style="width: 100px;"></div>

Article/Blog Post

Title, metadata, and content for article loading states.

HTML

<div class="focus-skeleton-article">
  <div class="focus-skeleton-article-header">
    <div class="focus-skeleton focus-skeleton-article-title"></div>
    <div class="focus-skeleton-article-meta">
      <div class="focus-skeleton focus-skeleton-avatar" style="width: 24px; height: 24px;"></div>
      <div class="focus-skeleton focus-skeleton-text" style="width: 100px;"></div>
      <div class="focus-skeleton focus-skeleton-text" style="width: 80px;"></div>
    </div>
  </div>
  <div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 100%; margin-bottom: 0.5rem;"></div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 100%; margin-bottom: 0.5rem;"></div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 90%; margin-bottom: 0.5rem;"></div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 95%; margin-bottom: 0.5rem;"></div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 70%;"></div>
  </div>
</div>

Card Loading State

Complete card skeleton combining multiple elements.

HTML

<div class="focus-card">
  <div class="focus-skeleton focus-skeleton-image focus-skeleton-image-video" style="border-radius: var(--focus-radius-md) var(--focus-radius-md) 0 0;"></div>
  <div class="focus-card-body">
    <div class="focus-skeleton focus-skeleton-heading" style="width: 70%; margin-bottom: 0.75rem;"></div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 100%; margin-bottom: 0.5rem;"></div>
    <div class="focus-skeleton focus-skeleton-text" style="width: 80%; margin-bottom: 1rem;"></div>
    <div class="focus-skeleton-user">
      <div class="focus-skeleton focus-skeleton-avatar" style="width: 32px; height: 32px;"></div>
      <div class="focus-skeleton-user-info">
        <div class="focus-skeleton focus-skeleton-text" style="width: 100px; height: 0.8em;"></div>
        <div class="focus-skeleton focus-skeleton-text" style="width: 60px; height: 0.6em;"></div>
      </div>
    </div>
  </div>
</div>

CSS Classes Reference

Class	Description
`.focus-skeleton`	Base skeleton element with shimmer animation (required)
`.focus-skeleton-text`	Single line text (1em height)
`.focus-skeleton-heading`	Heading text (1.5em height)
`.focus-skeleton-paragraph`	Multiple text lines with varied widths
`.focus-skeleton-avatar`	Circular avatar (40px)
`.focus-skeleton-avatar-sm`	Small avatar (32px)
`.focus-skeleton-avatar-lg`	Large avatar (56px)
`.focus-skeleton-avatar-xl`	Extra large avatar (80px)
`.focus-skeleton-button`	Button placeholder (100px × 36px)
`.focus-skeleton-button-sm`	Small button (80px × 28px)
`.focus-skeleton-button-lg`	Large button (120px × 44px)
`.focus-skeleton-icon`	Small icon placeholder (24px)
`.focus-skeleton-image`	Base image placeholder (16:9 default)
`.focus-skeleton-image-square`	1:1 aspect ratio
`.focus-skeleton-image-video`	16:9 aspect ratio
`.focus-skeleton-image-portrait`	3:4 aspect ratio
`.focus-skeleton-card`	Card container with border and padding
`.focus-skeleton-static`	No animation
`.focus-skeleton-pulse`	Pulsing opacity animation
`.focus-skeleton-wave`	Wave sweep animation
`.focus-skeleton-dark`	Dark mode variant with light gradient
`.focus-skeleton-rounded`	More rounded corners
`.focus-skeleton-circle`	Circular shape (50% radius)
`.focus-skeleton-square`	Square shape (no radius)
`.focus-skeleton-pill`	Full pill/capsule shape
`.focus-skeleton-user`	User row (avatar + info)
`.focus-skeleton-user-info`	User info text container
`.focus-skeleton-user-name`	User name line
`.focus-skeleton-user-meta`	User metadata line
`.focus-skeleton-card-content`	Card content layout container
`.focus-skeleton-list-item`	List item (icon + text)
`.focus-skeleton-table-row`	Table row container
`.focus-skeleton-table-cell`	Table cell
`.focus-skeleton-article`	Article layout container
`.focus-skeleton-article-header`	Article header section
`.focus-skeleton-article-title`	Article title (2em height)
`.focus-skeleton-article-meta`	Article metadata row
`.focus-skeleton-form-group`	Form field group
`.focus-skeleton-label`	Form label
`.focus-skeleton-input`	Form input (38px height)