Skeleton

The Skeleton directive provides loading state visualization by applying a shimmering effect over content while it loads.

Basic usage

The Skeleton can be applied to any element using the lmnSkeleton directive to show loading states.

Component anatomy

Activation

Control skeleton display with the lmnSkeleton Input:

• true: Shows loading effect
• false: Shows actual content
• Preserves element dimensions
• Maintains layout stability

Content Preservation

When active, the directive:

• Maintains original element size
• Prevents content interaction
• Handles overflow
• Preserves positioning

Animation

The skeleton effect includes:

• Smooth shimmering animation
• Consistent timing
• Reduced motion support
• Cross-browser compatibility

Layout Handling

Automatically adapts to:

• Element dimensions
• Position contexts
• Nested content
• Complex layouts

Negative Theme

Enable dark theme using the lmnSkeletonNegative Input for:

• Adjusted colors
• Proper contrast
• Animation visibility
• Background compatibility

Accessibility

Content States

The directive manages accessibility by:

• Setting inert attribute
• Preserving ARIA attributes
• Managing focus
• Indicating loading state

Animation Control

Respects user preferences:

• Honors reduced motion
• Maintains contrast
• Provides visual feedback
• Ensures readability

Screen Reader Support

Clear loading indication:

• Loading state announcements
• Content state changes
• Proper role assignment
• Focus management

Best Practices for Developers

1. Loading States DEMO HERE

2. Layout Stability DEMO HERE

3. Content Management DEMO HERE