Skeleton
The XSkeleton is a component for displaying a placeholder preview of your content before you load the actual page data. It’s a nice way of informing the user of what to expect from the page before it is fully loaded and increases the perceived performance. It can be used to incrementally display information on screen as data is being fetched.
Overview
typescript
type SkeletonTagVariant = 'div' | 'span';
type SkeletonTypeVariant =
| 'text'
| 'rect'
| 'circle'
| 'btn'
| 'badge'
| 'chip'
| 'toolbar'
| 'checkbox'
| 'radio'
| 'toggle'
| 'slider'
| 'range'
| 'input'
| 'avatar';
type SkeletonAnimationVariant =
| 'wave'
| 'pulse'
| 'pulse-x'
| 'pulse-y'
| 'fade'
| 'blink'
| 'none';
interface UseSkeletonClassesProps {
tag?: SkeletonTagVariant;
type?: SkeletonTypeVariant;
animation?: SkeletonAnimationVariant;
square?: boolean;
bordered?: boolean;
size?: string;
width?: string;
height?: string;
}Predefined types
Animations
Sizing
Styling
Square Borders
Custom Color
Custom Border
This section component is inspired on Quasar Skeletons.