Loading Animations

What it does

Designs honest, accessible loading feedback (spinners, skeletons, progress bars) for real asynchronous states.

When to use it

Use for route transitions, deferred content, uploads, or auditing loading states that mislead or block content.

Problems it prevents

Stops decorative loaders that run regardless of whether anything is actually still loading.

Typical workflow

1. Choose the state from the real task
2. Match the indicator to actual progress
3. Verify it clears exactly on completion
4. Check reduced-motion behaviour

Example output

A loading state tied to real progress data, not a spinner set to spin for a fixed, arbitrary duration.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemCinematic Animation System

  Designs bespoke, brand-specific motion (typography, imagery, interface, scroll, depth) that rejects default AI motion clichés.

• SystemPerformance

  Measures and improves loading, Core Web Vitals, images, fonts, JavaScript and animation cost on real devices.

• FocusedEmpty State Design

  Designs truthful, useful empty states for zero data, no search results, or permission-limited views.