Skeletons

Introduction

Skeleton components in Chassis CSS deliver intuitive loading experiences that maintain user engagement during content loading phases. Built with pure CSS animations and semantic markup, skeletons seamlessly integrate with your design system while providing visual continuity that reduces perceived loading times and enhances overall user experience.

Unlike traditional spinners or loading indicators, Chassis CSS skeletons preserve the visual structure of your interface, maintaining spatial relationships and content hierarchy while data loads. The component architecture uses CSS custom properties for runtime theming and supports comprehensive animation patterns for dynamic loading feedback.

Chassis CSS skeletons feature a flexible, semantic approach to loading states:

• Pure CSS implementation eliminates JavaScript dependencies for basic skeleton display
• Semantic markup maintains accessibility and screen reader compatibility during loading
• Animation patterns provide visual feedback through glow and wave effects
• Grid integration enables precise width control using existing layout utilities
• Design system alignment through CSS custom properties and contextual color support

Implementation

Before implementing skeleton components, consider these accessibility and performance considerations:

• Use aria-hidden="true" on skeleton containers to prevent screen reader interference
• Implement custom JavaScript to manage skeleton visibility and content transitions
• Provide appropriate aria-live announcements when content loads and skeletons are removed
• Consider reduced motion preferences when implementing skeleton animations
• Ensure skeleton dimensions match final content layout to prevent visual shifts

Examples

Explore practical skeleton implementations demonstrating loading patterns, animation effects, and integration techniques. These examples showcase Chassis CSS's flexible skeleton system across various interface components.

Basic structure

This foundational example demonstrates essential skeleton structure with proper accessibility attributes. Skeletons replace content during loading while maintaining visual hierarchy and spacing relationships.

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-content">
    <h5 class="card-title">Card title</h5>
    <p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="button primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-content">
    <h5 class="card-title skeleton-glow">
      <span class="skeleton col-6"></span>
    </h5>
    <p class="card-body skeleton-glow">
      <span class="skeleton col-7"></span>
      <span class="skeleton col-4"></span>
      <span class="skeleton col-4"></span>
      <span class="skeleton col-6"></span>
      <span class="skeleton col-8"></span>
    </p>
    <a class="button primary disabled skeleton col-6" aria-disabled="true"></a>
  </div>
</div>

Basic implementation

Create skeleton placeholders using the .skeleton class combined with grid column utilities for precise width control. Skeletons can replace text content or be applied as modifier classes to existing components.

<p aria-hidden="true">
  <span class="skeleton col-6"></span>
</p>

<a class="button primary disabled skeleton col-4" aria-disabled="true"></a>

Width customization

Configure skeleton width using grid column classes, width utilities, or inline styles for precise control based on content requirements and layout constraints.

<span class="skeleton col-6"></span>
<span class="skeleton w-75"></span>
<span class="skeleton" style="width: 25%;"></span>

Color themes

By default, skeletons inherit currentColor for seamless integration with your typography. Override with background utilities or custom colors to match your design system or create branded loading experiences.

<span class="skeleton col-12"></span>
<span class="skeleton col-12 bg-default"></span>
<span class="skeleton col-12 bg-alternate"></span>
<span class="skeleton col-12 bg-primary"></span>
<span class="skeleton col-12 bg-secondary"></span>
<span class="skeleton col-12 bg-neutral"></span>
<span class="skeleton col-12 bg-danger"></span>
<span class="skeleton col-12 bg-success"></span>
<span class="skeleton col-12 bg-warning"></span>
<span class="skeleton col-12 bg-info"></span>
<span class="skeleton col-12 bg-black"></span>
<span class="skeleton col-12 bg-white"></span>

Size variations

Skeleton dimensions automatically inherit from parent element typography. Apply typography classes or text utilities to create skeleton variations that match your content hierarchy.

<span class="skeleton col-12 font-xlarge"></span>
<span class="skeleton col-12"></span>
<span class="skeleton col-12 font-xsmall"></span>

<p class="font-small">
  <span class="skeleton col-5"></span>
  <span class="skeleton col-3 text-small"></span>
  <span class="skeleton col-3 text-large"></span>
</p>

Animation effects

Enhance skeleton loading feedback with animation patterns that convey active loading states. Apply .skeleton-glow for subtle pulsing effects or .skeleton-wave for directional motion that suggests content streaming.

<p class="skeleton-glow">
  <span class="skeleton col-12"></span>
</p>

<p class="skeleton-wave">
  <span class="skeleton col-12"></span>
</p>

Complex layouts

Build sophisticated loading states by combining multiple skeleton elements within structured layouts. This approach maintains visual hierarchy while providing comprehensive loading feedback for complex interface sections.

<div class="row skeleton-glow" aria-hidden="true">
  <div class="medium:col-3">
    <span class="skeleton col-12 skeleton-large" style="height: 8rem;"></span>
  </div>
  <div class="medium:col-9">
    <span class="skeleton col-8 skeleton-large"></span>
    <span class="skeleton col-12"></span>
    <span class="skeleton col-10"></span>
    <span class="skeleton col-6"></span>
  </div>
</div>

Button integration

For interactive elements like buttons, combine skeleton classes with disabled states to maintain proper spacing and interaction feedback. Additional styling ensures height preservation when text content is absent.

<div class="d-flex gap-medium">
  <button class="button disabled skeleton col-3" aria-disabled="true"></button>
  <button class="button primary disabled skeleton col-3" aria-disabled="true"></button>
  <button class="button secondary disabled skeleton col-3" aria-disabled="true"></button>
</div>

CSS

This component is customized exclusively through Sass variables during compilation rather than exposed CSS custom properties.

Sass variables

These Sass variables control the component's appearance and can be modified in the project's variables file before compilation.

$skeleton-opacity-max:           .3;
$skeleton-opacity-min:           .15;