Skeleton Component

Live Example

HTML Structure

Skeleton components are built using simple `div` elements with specific classes to define their shape and animation.

<!-- Loading Card -->
	<div class="skeleton-card">
			<div class="skeleton-image"></div>
			<div class="skeleton-line short"></div>
			<div class="skeleton-line medium"></div>
			<div class="skeleton-line long"></div>
	</div>

	<!-- Loading Text Block -->
	<div class="skeleton-text-block">
			<div class="skeleton-line full"></div>
			<div class="skeleton-line full"></div>
			<div class="skeleton-line short"></div>
	</div>

Styling

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

• .skeleton-card, .skeleton-text-block: Containers for different types of skeleton loaders.
• .skeleton-image: Creates a placeholder for an image.
• .skeleton-line: Creates a line of varying length (.short, .medium, .long, .full) to represent text.
• A shimmering animation is applied to these elements to indicate activity.

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.