Enterprise-grade Lightning Web Component skeleton loader with authentic Salesforce Lightning design. 9 stunning animations, fully customizable, and production-ready. Transform your Salesforce loading experience.
Everything you need for professional loading experiences in Salesforce
Uses exact Salesforce Lightning skeleton colors (#e5f3fd, #cbe7fb) for perfect SLDS compliance and native appearance in your Salesforce org.
Shimmer, Pulse, Wave, Fade, Gradient Shift, Glow, Slide, Bounce, and None - choose the perfect animation for your Salesforce Lightning pages.
Automatically adapts to all screen sizes and devices. Maintains perfect proportions on mobile, tablet, and desktop in Salesforce Lightning.
Minimal overhead, optimized performance. Zero dependencies and tiny bundle size under 1kb for your Salesforce Lightning apps.
Easy to configure with simple attributes. Support for all skeleton types with minimal code in your Lightning Web Components.
Built with ARIA attributes and semantic HTML. Screen reader friendly and keyboard navigable for Salesforce accessibility standards.
Transform your Salesforce user experience with modern loading patterns
See all skeleton types with their source code and animations for Salesforce Lightning
<template if:true={isLoading}>
<c-lwc-skeleton type="text" lines="4"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="table" rows="6" columns="4"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="card"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="avatar"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="rectangle"
width="100%" height="150px"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="input"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="button"></c-lwc-skeleton>
</template>
<template if:true={isLoading}>
<c-lwc-skeleton type="small-text" lines="2"></c-lwc-skeleton>
</template>
Get started with LWC Skeleton in minutes
# Option 1 - Manual Installation from GitHub git clone https://github.com/DEV-NKP/lwc-skeleton.git # Copy the lwc-skeleton folder into force-app/main/default/lwc/ # Deploy to your Salesforce org sfdx force:source:deploy -p force-app
# Option 2 - Use in your parent component
<template if:true={isLoading}>
<c-lwc-skeleton type="text" lines="4" animation="shimmer"></c-lwc-skeleton>
<c-lwc-skeleton type="small-text" lines="2" animation="wave"></c-lwc-skeleton>
<c-lwc-skeleton type="avatar" animation="pulse"></c-lwc-skeleton>
<c-lwc-skeleton type="card" animation="fade"></c-lwc-skeleton>
<c-lwc-skeleton type="table" rows="6" columns="4" animation="gradient-shift"></c-lwc-skeleton>
<c-lwc-skeleton type="rectangle" width="100%" height="200px" animation="glow"></c-lwc-skeleton>
<c-lwc-skeleton type="button" animation="slide"></c-lwc-skeleton>
<c-lwc-skeleton type="input" animation="bounce"></c-lwc-skeleton>
</template>
Complete documentation for all available properties in LWC Skeleton
| Property | Type | Default | Description |
|---|---|---|---|
type |
String | text |
Skeleton type: text, small-text, avatar, card, table, rectangle, input, button |
animation |
String | shimmer |
Animation type: shimmer, pulse, wave, fade, gradient-shift, glow, slide, bounce, none |
lines |
Number | 3 |
Number of text lines (for text type) |
rows |
Number | 5 |
Number of table rows (for table type) |
columns |
Number | 3 |
Number of table columns (for table type) |
width |
String | 100% |
Width for rectangle type |
height |
String | 150px |
Height for rectangle type |
radius |
String | 4px |
Border radius for rectangle type |
Everything you need to know about LWC Skeleton
LWC Skeleton uses authentic Salesforce Lightning colors (#e5f3fd, #cbe7fb) and follows SLDS guidelines exactly. It provides 9 different animation types, is fully responsive, and includes specialized skeleton types for all common LWC use cases including profiles, inputs, and buttons. Built following Salesforce best practices for optimal performance and user experience.
Yes! LWC Skeleton is built following Salesforce Lightning Design System guidelines. It uses the exact skeleton colors specified in SLDS, maintains proper spacing and proportions, and integrates seamlessly with Lightning components. Perfect for any Salesforce org.
Skeleton loaders show the actual structure of content while loading, which reduces user anxiety and improves perceived performance in Salesforce applications. They prevent layout shifts, maintain visual continuity, and provide a more professional, modern user experience compared to traditional spinners.
Absolutely! You can choose from 9 different animation types and customize colors through CSS custom properties. The component is designed to be flexible while maintaining SLDS compliance. You can also create custom skeleton types by extending the base component in your Salesforce org.
LWC Skeleton includes: Text, Small Text, Avatar, Card, Table, Rectangle, Input, and Button skeletons. Each type is optimized for its specific use case and maintains authentic Salesforce Lightning appearance. Perfect for any Salesforce Lightning Web Component.
Join thousands of Salesforce developers using LWC Skeleton in production