Modern Skeleton Loading Screens

Design premium, animated skeleton loaders with pulsing shimmer effects for cards, text, grids, and lists. Includes beautifully crafted Dark and Light themes.

Elevate your user experience during data fetching by replacing traditional spinners with these premium, structure-aware Skeleton Loaders. This suite includes fully-responsive layouts for avatars, text lines, image cards, and grids, wrapped in high-fidelity shimmer animations.

Design Highlights

• Multi-Themed: Ships fully equipped with mathematically perfect contrasts for both Dark and Light modes.
• Hardware Accelerated Shimmer: Uses a -45deg linear-gradient mapped to background-size: 200% and infinite linear translation for a buttery-smooth shine effect.
• Modular Utility Classes: Build any layout instantly. Use .sk-avatar, .sk-text, .sk-image, and .sk-card to assemble infinite combinations.
• Pulsing Depth: Soft box-shadows and subtle border radiuses make the placeholders feel like real, tactile UI elements waiting to be filled.

Code Snippet

HTML Structure

Wrap any layout inside a .theme-dark or .theme-light container to automatically contextualize the shimmer colors.

<!-- Example: A Complete Article Card Skeleton -->
<div class="skeleton-wrapper theme-dark">
  <div class="sk-card">
    <div class="sk-image shimmer"></div>
    <div class="sk-content">
      <div class="sk-text title shimmer"></div>
      <div class="sk-text shimmer"></div>
      <div class="sk-text short shimmer"></div>
      
      <!-- User Profile Row -->
      <div class="sk-user-row">
        <div class="sk-avatar shimmer"></div>
        <div class="sk-user-info">
          <div class="sk-text inline shimmer"></div>
          <div class="sk-text tiny shimmer"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS Styles & Shimmer Animation

The secret is the infinite keyframe moving the background position. Custom CSS properties make theme switching effortless and elegant.

/* Core Skeleton Shapes */
.shimmer {
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
}

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

/* Light Theme Variables */
.theme-light {
  --sk-bg: #f8fafc;
  --sk-border: #e2e8f0;
  --sk-base: #e2e8f0;
  --sk-shine: #f1f5f9;
}

/* Dark Theme Variables */
.theme-dark {
  --sk-bg: #0f172a;
  --sk-border: #1e293b;
  --sk-base: #1e293b;
  --sk-shine: #334155;
}

/* Base shape styles mapped to themes */
.theme-light .shimmer {
  background-image: linear-gradient(110deg, var(--sk-base) 8%, var(--sk-shine) 18%, var(--sk-base) 33%);
}

.theme-dark .shimmer {
  background-image: linear-gradient(110deg, var(--sk-base) 8%, var(--sk-shine) 18%, var(--sk-base) 33%);
}

.sk-card {
  background: var(--sk-bg);
  border: 1px solid var(--sk-border);
  border-radius: 16px;
  overflow: hidden;
  padding: 1.5rem;
}

.sk-image {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.sk-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sk-text {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  width: 100%;
}

.sk-text.title { height: 20px; width: 70%; margin-bottom: 20px; }
.sk-text.short { width: 40%; }
.sk-text.tiny { height: 10px; width: 60%; }