loading-page-design

Loading Page Design Skill

Design beautiful, performant loading pages that provide excellent user experience while users wait for content to load.

Core Principles

1. Set Clear Expectations

Users should always know:

• Something is happening
• How long they might wait (if predictable)
• What is being loaded

2. Keep It Engaging

• Use smooth, purposeful animations
• Show branded visual elements
• Provide feedback through progress indicators

3. Performance First

• Loading page itself must load fast
• Use CSS animations over JavaScript where possible
• Keep the loading UI lightweight

Loading Page Types

Full Page Loader

Covers the entire viewport during initial page load. Best for:

• Critical path loading
• App initialization
• Heavy content pages

Skeleton Screen

Shows a wireframeplaceholder structure of content loading. Best for:

• Feed/list content
• Card-based layouts
• Dynamic data tables

Inline Loader

Small indicator within existing content. Best for:

• Button loading states
• Form submissions
• Section refreshes

Progress Bar

Shows percentage or steps complete. Best for:

• File uploads/downloads
• Multi-step processes
• Known-duration operations

Animation Guidelines

Spinner Animations

/* Classic rotating spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulsing dots */
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

Skeleton/Shimmer Effect

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

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Progress Bar

@keyframes progress {
  0% { width: 0%; }
  100% { width: var(--progress, 100%); }
}

Design Patterns

Pattern 1: Minimal Dot Spinner

• 3-4 dots in a row
• Sequential pulse animation
• Subtle, non-distracting
• Use case: Inline loading, small spaces