Animated Skeleton Loaders using CSS Keyframes

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

body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f3f4f6; }
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 500px;
}
.skeleton-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  display: flex;
  gap: 20px;
  align-items: center;
}
.skeleton-card:nth-child(2) {
  flex-direction: column;
  align-items: flex-start;
}

/* Base Skeleton Styling */
.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  width: 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Specific Sizes */
.skeleton-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}
.skeleton-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-text {
  height: 12px;
  width: 100%;
}
.skeleton-title {
  height: 16px;
  width: 60%;
  margin-bottom: 5px;
}
.skeleton-text:last-child {
  width: 80%;
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

// Skeleton loaders are pure CSS! No JS needed.