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.