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);
}Loading-to-Content Transition
.content-enter {
animation: content-reveal 300ms ease-out forwards;
}
@keyframes content-reveal {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Key Rules
- Delay spinner appearance by 200ms to avoid flash
- Keep loading visible minimum 500ms once shown
- Skeleton shapes must match real content dimensions
- Transition smoothly from loading to content - never pop
- Respect
prefers-reduced-motion- show static indicator instead