Skeleton

Ripple UI comes with a set of skeleton components that are used to show the loading state of a page or a component.

​

Default

Simple example of Skeleton.

<div class="skeleton h-24"></div>

​

Skeleton Static

Skeleton static variant.

<div class="skeleton-static h-24"></div>

​

Skeleton Pulse

Skeleton pulse variant.

<div class="skeleton-pulse h-24"></div>

​

Table Skeleton

Base Skeleton example for table.

<table class="table w-full max-w-4xl">
	<thead>
		<tr>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<th><div class="skeleton h-5 rounded-md"></div></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
		</tr>
		<tr>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
		</tr>
		<tr>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
		</tr>
		<tr>
			<th><div class="skeleton h-5 rounded-md"></div></th>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
			<td><div class="skeleton h-5 rounded-md"></div></td>
		</tr>
	</tbody>
</table>

​

Pulse Skeleton table

Skeleton pulse variant for table.

<table class="table w-full max-w-4xl">
	<thead>
		<tr>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
		</tr>
		<tr>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
		</tr>
		<tr>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
		</tr>
		<tr>
			<th><div class="skeleton-pulse h-5 rounded-md"></div></th>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
			<td><div class="skeleton-pulse h-5 rounded-md"></div></td>
		</tr>
	</tbody>
</table>

​

API