Components
Skeleton
Use Semji's skeleton component with Tailwind CSS to show loading states, enhancing UX in your web applications.
Variants
Default skeleton
Apply the `skeleton` component class to any markup to showcase it's structure.
Animated skeleton
Apply the `skeleton-animated` modifier class to any markup to showcase it's structure with loading animation.
Striped skeleton
Apply the `skeleton-striped` modifier class to any element to display its structure with a striped skeleton effect.
Active skeleton
Add the `animate-pulse` animation class to any markup to display its structure with an active animation. For additional options, refer to the TailwindCSS <a href="https://tailwindcss.com/docs/animation" target="_blank" class="link link-primary">animation</a> documentation.
Illustrations
Circle with content
Utilize the provided example to present a skeleton featuring a circular shape and content.
Rectangle with content
Utilize the provided example to present a skeleton featuring a Rectangular shape and content with loading animation.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
skeleton | component | Displays a markup's structure. |
skeleton-animated | modifier | Displays skeleton with loading animation. |
skeleton-striped | modifier | Displays skeleton with striped lines. |