home / skills / dylantarre / animation-principles / loaders-spinners

loaders-spinners skill

/skills/07-by-ui-element/loaders-spinners

This skill helps you design animated loaders and skeletons by applying Disney's 12 principles to improve wait experiences.

npx playbooks add skill dylantarre/animation-principles --skill loaders-spinners

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.9 KB

---
name: loaders-spinners
description: Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
---

# 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.

### 8. Secondary Action
While spinner rotates (primary), glow pulses (secondary). Skeleton shimmer is secondary to skeleton shape.

### 9. Timing
- Spinner full rotation: 800-1200ms
- Bounce cycle: 500-800ms
- Skeleton shimmer: 1500-2500ms
- Progress bar smooth updates: 200ms
- Dot stagger: 100-150ms
- Pulse: 1000-2000ms

### 10. Exaggeration
Playful brands can use bouncy, elastic loaders. Professional contexts need subtle, smooth spinners. Match brand energy.

### 11. Solid Drawing
Maintain consistent stroke widths. Circular paths should be true circles. Progress bars should fill evenly.

### 12. Appeal
Engaging loaders reduce perceived wait time. Boring spinners feel slower. A delightful loader can turn frustration into momentary joy.

## CSS Implementation

```css
.spinner {
  animation: spin 1000ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.bounce-dot {
  animation: bounce 600ms ease-in-out infinite alternate;
}

.bounce-dot:nth-child(2) { animation-delay: 100ms; }
.bounce-dot:nth-child(3) { animation-delay: 200ms; }

@keyframes bounce {
  from { transform: translateY(0) scaleY(1); }
  to { transform: translateY(-20px) scaleY(0.9); }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 2000ms infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}
```

## Key Properties
- `transform`: rotate, translateY, scale
- `animation`: infinite loops
- `background-position`: shimmer effects
- `stroke-dashoffset`: SVG spinners
- `opacity`: pulsing effects

Overview

This skill teaches how to design loading indicators, spinners, progress bars, and skeleton screens using Disney’s 12 animation principles. It focuses on creating clear, engaging wait experiences that communicate status while matching brand tone. The guidance includes timing, easing, motion arcs, and practical CSS snippets for common patterns.

How this skill works

It inspects common loader types (spinners, bouncing dots, progress bars, skeleton shimmers) and applies animation principles like squash & stretch, anticipation, and ease in/out. The skill recommends timing ranges, stagger offsets, and secondary actions to make wait states informative and delightful. It also provides practical CSS examples and key properties to implement robust animations.

When to use it

When users wait for network or compute tasks and you need to reduce perceived latency
When replacing static placeholders with skeleton screens to show content structure
When you want loaders to reflect brand personality (playful vs. professional)
When multi-part or sequential data loads can benefit from staggered timing and follow-through
When a progress indicator should signal imminent completion with anticipation

Best practices

Make loaders visible but non-blocking; use staging to indicate where content will appear
Match exaggeration and motion energy to brand context—subtle for professional, bouncy for playful
Use ease-in/out for entry and exit; use linear only for truly continuous rotations
Stagger multi-element animations (100–150ms) to create natural rhythm and follow-through
Keep shapes and strokes consistent; use true arcs for circular motion and parabolic paths for bounces
Use a short smooth update (≈200ms) for progress changes to avoid jarring jumps

Example use cases

Bouncing-dot loader for a playful app: apply squash & stretch and 500–800ms bounce cycle with 100ms stagger
Skeleton screen for content feeds: shimmer 1500–2500ms and stage content areas to reduce perceived wait
Progress bar for uploads: pose-to-pose keyframes, 200ms smooth updates, and a brief slow-down (anticipation) before completion
Circular SVG spinner for dashboards: true circular path, 800–1200ms rotation, use stroke-dashoffset for personable reveals

FAQ

What timing should I choose for a spinner?

Use 800–1200ms for a full rotation; faster feels urgent, slower feels relaxed.

When should I use staggered dots vs a single spinner?

Use staggered dots for playful, human-feeling waits and single spinners for compact, unobtrusive indicators.

How do I signal imminent completion?

Introduce anticipation: pause or decelerate the animation briefly before stopping or snap to a final pose.