Skeleton

A skeleton is a gentle pulsing placeholder element that represents content that’s not yet loaded.

Usage

Add the .skeleton class to any block element to create a skeleton component.

<div class="skeleton"></div>

Customizing

You can control the height, width, and border radius with the --height, --width, and --border-radius CSS variables, respectively.

They can be used in combination to create a realistic looking skeleton layout.

<div class="sidecar">
	<div>
		<div class="skeleton" style="--height: 8em; --width: 8em; --border-radius: 50%;"></div>
	</div>
	<div class="stack">
		<div class="skeleton" style="--width: 8em;"></div>
		<div class="skeleton"></div>
		<div class="skeleton" style="--width: 12em;"></div>
		<div class="skeleton" style="--height: 2em; --width: 6em;"></div>
	</div>
</div>

Install

The .skeleton class is included in kelp.css.

If you’re installing components individually, load the /css/components/skeleton.css file.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/kelpui@0/css/components/skeleton.css">