Loading States

Applies Disney's animation principles to loading states, which sounds odd but actually makes sense when you see the timing tables. The core insight is treating loading as choreography: delay spinners 200ms to avoid flashing on fast loads, keep them visible for a minimum 500ms once shown, and overlap the loading-to-content transition by 100ms so nothing pops. Includes specific CSS for skeleton shimmers and spinner fade-ins. The timing recommendations alone (when to show what, for how long) are worth having on hand. Respects prefers-reduced-motion, which is table stakes but good to see documented.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill loading-states --agent claude-code