loading-states

Loading State Animations

Apply Disney's 12 principles to communicate system activity.

Principle Application

Squash & Stretch: Progress indicators can pulse/breathe to show life. Slight scale oscillation (0.98-1.02).

Anticipation: Show loading state immediately on action. Don't wait for slow response to show spinner.

Staging: Loading indicators appear where content will be. Skeleton screens match final layout.

Straight Ahead vs Pose-to-Pose: Design loading as a sequence: instant indicator → progress → completion → content.

Follow Through & Overlapping: Loading fades as content enters. Overlap the transition by 100ms.

Slow In/Slow Out: Progress bars ease-in-out between known percentages. Indeterminate uses smooth oscillation.

Arcs: Circular spinners follow true circular paths. Avoid jerky rotation.

Secondary Action: Skeleton shimmer + subtle pulse. Multiple signals reinforce "loading."

Timing:

• Show spinner after 200ms delay (avoid flash for fast loads)
• Minimum display: 500ms (prevent jarring flash)
• Skeleton shimmer cycle: 1500-2000ms

Exaggeration: Keep minimal - loading shouldn't distract, just reassure.

Solid Drawing: Skeletons should match content proportions. Wrong shapes break the illusion.

Appeal: Loading should feel optimistic, not tedious. Smooth motion suggests progress.

Timing Recommendations

Loading Type	Appear Delay	Min Display	Animation Cycle
Spinner	200ms	500ms	700-800ms
Progress Bar	0ms	-	smooth fill
Skeleton	0ms	500ms	1500ms shimmer
Button Spinner	0ms	400ms	600ms
Full Page	100ms	800ms	1000ms

Implementation Patterns

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f0f0f0 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1500ms ease-in-out infinite;
}

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

/* Spinner with smooth rotation */
.spinner {
  animation: spin 700ms linear infinite;
  opacity: 0;
  animation: fade-in 200ms 200ms ease-out forwards, spin 700ms linear infinite;
}

/* Progress bar with easing */
.progress-fill {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}