Loaders Spinners
This gives you animation principles specifically for loading states, applying Disney's 12 animation rules to spinners, progress bars, and skeleton screens. You get concrete timing recommendations (spinner rotations at 800-1200ms, dot staggers at 100-150ms), easing guidance for different loader types, and CSS implementations for common patterns like bouncing dots with stagger delays and skeleton shimmers. The approach treats loaders as micro-interactions that deserve thoughtful motion design rather than just throwing in a generic spinner. Most useful when you're building a design system or want your loading states to feel polished instead of like an afterthought.
- skills.sh installs
- 554
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill loaders-spinners --agent claude-codeInstalls into .claude/skills of the current project.
Files
Loader & Spinner Animation Principles
Apply Disney's 12 principles to loading indicators for engaging, informative wait experiences.
Principles Applied to Loaders
1. Squash & Stretch
Bouncing dot loaders should squash on landing, stretch while rising. Creates life-like, playful motion.
2. Anticipation
Before progress completes, bar can briefly pause or slow. Spinners can decelerate before stopping. Signals completion coming.
3. Staging
Loader should be clearly visible but not block content unnecessarily. Skeleton screens stage where real content will appear.
4. Straight Ahead & Pose to Pose
Organic loaders (bouncing dots) benefit from straight-ahead. Progress bars use pose-to-pose (0% to 100% keyframes).
5. Follow Through & Overlapping Action
Multi-part loaders should have elements offset in timing. Dot 1 bounces, dot 2 follows 100ms later. Creates rhythm.
6. Ease In & Ease Out
Spinning: use ease-in-out per rotation cycle or linear for continuous. Bouncing: ease-in up, ease-out down.
7. Arcs
Orbital loaders should follow true circular arcs. Bouncing elements follow parabolic arcs like real physics.
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- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
Recommended
More Design & UI/UX
forms-inputsdylantarre/animation-principlesUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback553skills.sh installssocial-mediadylantarre/animation-principlesUse when designing animations for social platforms, messaging apps, content sharing, or community features551skills.sh installsuser-feedback-claritydylantarre/animation-principlesUse when users don't notice feedback, miss state changes, or can't tell if their action worked542skills.sh installsprofessionalism-credibilitydylantarre/animation-principlesUse when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.533skills.sh installs
prototypeplugin87/ux-ui-agent-skillsMove an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and us528skills.sh installstoken-buildplugin87/ux-ui-agent-skillsSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS 522skills.sh installs