🏷️ Badges & Loading
Status indicators, category labels, notification badges, and skeleton loading states
🎭 Component Demonstrations
Interactive examples of badges, labels, notification indicators, and skeleton loading states
Status Badges
Success
Active
Completed
Available
Warning
Pending
Review
Caution
Error
Failed
Error
Blocked
Info
Info
Processing
Draft
Size Variations
Small
Medium
Large
Extra Large
Category Labels
Product Categories
Electronics
Clothing
Books
Sports
Beauty
Home
Content Tags
#design
#development
#ui-ux
#frontend
#javascript
Notification Badges
3
Messages
12
Interactive Badge Demo
Messages
Basic Skeletons
Text Skeletons
Avatar Skeletons
Image Skeletons
Product Card Skeleton
Article Skeleton
Interactive Loading Demo
John Doe
Software Developer
This is the actual content that appears after loading is complete. The skeleton provides a placeholder that matches the structure of this content.
Loading Animation Variations
Standard Pulse
Shimmer Effect
Skeleton Loading (Shimmer)
📝 Usage Examples
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
<span class="bg-blue-600 text-white text-sm px-3 py-1 rounded-full">Processing</span>
<div class="h-4 bg-gray-200 rounded animate-pulse"></div>
<div class="h-4 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 rounded sparkles-shimmer"></div>
<div class="relative">
<button class="p-3 bg-gray-100 rounded-lg">Notifications</button>
<span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
</div>
⚡ Performance & Accessibility
Badge & Loading Best Practices
- 🎯 Badge accessibility: Use semantic HTML and ARIA labels for status indicators to support screen readers
- 📢 Loading state accessibility: Implement proper screen reader announcements for dynamic content changes
- ⚡ Performance considerations: CSS animations use GPU acceleration and efficient rendering for smooth skeleton states
- 📱 Mobile-friendly indicators: Support reduced motion preferences and ensure touch-friendly badge interactions