Responsive Skeleton Loader

<div class="skeleton-loader-container">
  <div class="skeleton-card">
    <div class="skeleton-image"></div>
    <div class="skeleton-content">
      <div class="skeleton-title"></div>
      <div class="skeleton-text"></div>
      <div class="skeleton-text skeleton-text-short"></div>
    </div>
  </div>
  
  <div class="skeleton-card">
    <div class="skeleton-image"></div>
    <div class="skeleton-content">
      <div class="skeleton-title"></div>
      <div class="skeleton-text"></div>
      <div class="skeleton-text skeleton-text-short"></div>
    </div>
  </div>
</div>

.skeleton-loader-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 600px;
}

.skeleton-card {
  background-color: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding-bottom: 16px;
  transition: all 0.3s ease;
}

.skeleton-image {
  width: 100%;
  height: 140px;
  background: linear-gradient(110deg, 
    #e0e0e0 8%, 
    #f8f8f8 18%, 
    #e0e0e0 33%);
  border-radius: 0;
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-content {
  padding: 16px;
}

.skeleton-title {
  width: 85%;
  height: 20px;
  margin-bottom: 12px;
  background: linear-gradient(110deg, 
    #e0e0e0 8%, 
    #f8f8f8 18%, 
    #e0e0e0 33%);
  border-radius: 4px;
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
  background: linear-gradient(110deg, 
    #e0e0e0 8%, 
    #f8f8f8 18%, 
    #e0e0e0 33%);
  border-radius: 4px;
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  animation-delay: 0.1s;
}

.skeleton-text-short {
  width: 65%;
  animation-delay: 0.2s;
}

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

/* Dark mode styles */
.dark-mode .skeleton-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode .skeleton-image,
.dark-mode .skeleton-title,
.dark-mode .skeleton-text {
  background: linear-gradient(110deg, 
    #333 8%, 
    #454545 18%, 
    #333 33%);
  background-size: 200% 100%;
}

// Example of how to use the skeleton loader with real content
document.addEventListener('DOMContentLoaded', function() {
  // Simulate content loading delay
  setTimeout(function() {
    // Replace skeleton loaders with actual content
    const skeletonCards = document.querySelectorAll('.skeleton-card');
    
    // Example of replacing skeleton with real content
    // In a real application, you would fetch data and dynamically generate elements
    skeletonCards.forEach((card, index) => {
      card.innerHTML = `
        
        

          
Real Title Content
          
This is the actual content that has been loaded.
          
Additional information here.
        
      `;
      
      // Add loaded class for transition effects
      card.classList.add('loaded');
    });
  }, 3000); // 3 second delay to simulate loading
});