Skeleton Loader

/* Skeleton Loader Animations */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text:last-child {
  width: 80%;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 16px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.skeleton-button {
  width: 120px;
  height: 40px;
  border-radius: 6px;
}

/* Dark mode skeleton */
.dark .skeleton {
  background: linear-gradient(
    90deg,
    #2a2a2a 0%,
    #3a3a3a 20%,
    #2a2a2a 40%,
    #2a2a2a 100%
  );
  background-size: 200% 100%;
}

/* Tailwind CSS Version */
@layer components {
  .skeleton-base {
    @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200;
    @apply bg-[length:200%_100%];
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
  }
  
  .skeleton-text {
    @apply skeleton-base h-4 rounded mb-2;
  }
  
  .skeleton-title {
    @apply skeleton-base h-6 w-3/5 rounded mb-4;
  }
  
  .skeleton-avatar {
    @apply skeleton-base w-12 h-12 rounded-full;
  }
  
  .skeleton-card {
    @apply skeleton-base w-full h-48 rounded-lg;
  }
  
  .skeleton-button {
    @apply skeleton-base w-28 h-10 rounded-sm;
  }
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Usage Example HTML */
/*
<div class="skeleton-card-wrapper">
  <div class="skeleton-image"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text" style="width: 70%"></div>
  <div class="skeleton-button"></div>
</div>

<!-- Tailwind Version -->
<div class="space-y-4">
  <div class="skeleton-card"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text w-4/5"></div>
  <div class="skeleton-button"></div>
</div>
*/