API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/Skeleton

Skeleton

Loading placeholders with shimmer animation

🔧 Props

Property	Type	Default	Description
variant	string	'text'	'text', 'title', 'avatar', 'button', 'card', 'image', 'custom'
width	string	variant-specific	Width (CSS value)
height	string	variant-specific	Height (CSS value)
rounded	string	'md'	Border radius (Tailwind value)
animate	boolean	true	Enable shimmer animation
lines	number	3	Number of lines (text variant only)
class	string	-	Additional Tailwind classes

✨ Features

Hardware-accelerated shimmer animation (2s duration)

7 pre-configured variants for common use cases

7 pre-built composite skeletons (Card, ListItem, Profile, etc.)

Respects prefers-reduced-motion (when implemented)

Full Tailwind customization via filterClassName

💻 Examples

Loading Card

javascript•Loading Card

const loading = van.state(true);
setTimeout(() => loading.val = false, 12000);

return () => loading.val
  ? CardSkeleton()
  : Card({ class: 'p-4' }, p('Card loaded!'));

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

Custom Skeleton

javascript•Custom Skeleton

return Skeleton({
  variant: 'custom',
  width: '100%',
  height: '200px',
  rounded: 'xl'
});

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do