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.
- skills.sh installs
- 610
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill loading-states --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Dramatic 2000ms Plus609
- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
Recommended
More Design & UI/UX
dramatic-2000ms-plusdylantarre/animation-principlesUse when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product609skills.sh installsnavigation-menusdylantarre/animation-principlesUse when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions601skills.sh installs
pixel-artomer-metin/skills-for-antigravityDeep pixel art expertise covering fundamentals, limited palettes, dithering patterns, subpixel animation, tile design, retro hardware constraints, and HD-2D hyb594skills.sh installs
latex-postersdavila7/claude-code-templatesCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientifi592skills.sh installs
website-builder-setuptenfoldmarc/website-builder-setupInstall the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience nee592skills.sh installs
stardustadobe/skillsGuided multi-page redesign of an existing website through a four-phase pipeline — extract (crawl and capture the current site), direct (set a visual direction),569skills.sh installs