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.
HTML
JSX
<div class="skeleton h-24"></div>
Skeleton Pulse#
Skeleton pulse variant.
HTML
JSX
<div class="skeleton-pulse h-24"></div>
Table Skeleton#
Base Skeleton example for table.
HTML
JSX
<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.
HTML
JSX
<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#
class | Description |
---|---|
skeleton | skeleton base class with wave effect |
skeleton-pulse | skeleton base class with pulse effect |