Skeleton & Spinner
Loading placeholders and spinners with iOS-style activity indicators. Use SkeletonRaw for content placeholders and SpinnerRaw for active loading states. Usage Classes
Variants
Text
Box
Circle / Avatar
Sizes
Text Sizes
xs
sm
md
lg
xl
Circle/Avatar Sizes
xs
sm
md
lg
xl
Shapes
rounded
square
pill
circle
Animation
Animated (default)
Static (no animation)
Custom Dimensions
50×50
100×30
200×100
CSS values
Common Layouts
User Card
Article Card
Table Rows
Spinner
iOS-style activity indicator with 12 animated bars
Usage
<!-- Text skeleton -->
<UIKitFeedbackSkeleton variant="text" />
<!-- Circle/Avatar -->
<UIKitFeedbackSkeleton variant="circle" size="lg" />
<UIKitFeedbackSkeleton variant="avatar" size="md" />
<!-- Box with custom dimensions -->
<UIKitFeedbackSkeleton variant="box" :width="200" :height="100" />
<!-- Different shapes -->
<UIKitFeedbackSkeleton shape="pill" :width="80" :height="30" />
<UIKitFeedbackSkeleton shape="square" :width="50" :height="50" />
<!-- Static (no animation) -->
<UIKitFeedbackSkeleton variant="text" :animated="false" />Classes