Skeleton

Axiom01's skeleton component provides a visual placeholder for content that is still loading. This helps improve perceiv...

Live Example

Loading Card

Loading Text Block

HTML Structure

Skeleton components are built using simple div elements with specific classes to define their shape and animation. Use inline styles to set widths and aspect ratios. 
<!-- Loading Card -->
<div class="card skeleton">
	<div class="skeleton figure"></div>
	<div>
		<div class="skeleton p span medium"></div>
		<div class="skeleton p span"></div>
		<div class="skeleton p span short"></div>
	</div>
</div>

<!-- Loading Text Block -->
<div class="skeleton">
	<div class="skeleton p span"></div>
	<div class="skeleton p span"></div>
	<div class="skeleton p span short"></div>
</div>

Styling

The core of the skeleton component is its CSS, which creates the placeholder shapes and the loading animation.

  • .skeleton: Adds the shimmering animation background to any element.
  • p: A modifier for .skeleton that sets the height to 1em and adds standard spacing.
  • span: Sets width to 100%. Optional modifiers: .short (60%) or .medium (80%).
  • figure: Sets width to 100% and aspect ratio to 16/9.

JavaScript Integration

Skeleton components are typically used in conjunction with JavaScript. You would display the skeleton loader while data is being fetched (e.g., from an API call) and then replace it with the actual content once it's loaded.

Accessibility

While skeleton loaders provide a visual cue, they don't convey semantic meaning to screen readers. For accessibility, consider adding an aria-live="polite" region to announce when content is loading and when it has finished loading.

Customization

Customize the appearance using Axiom01's CSS variables for colors (e.g., --a-color-surface-variant for the background of the skeleton elements) and animation properties. You can adjust the height and width of the skeleton lines and images to match the dimensions of your actual content.

Required Markup Contract

  • Use skeleton container classes such as .skeleton or .skeleton.
  • Compose placeholders with shape classes like figure and span.
  • For loading announcements, pair placeholders with an aria-live status region in your app shell.

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Skeleton component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.