What is loading-states?
Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working. Source: dylantarre/animation-principles.
·loading-states
*
loading-states
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesSource: dylantarre/animation-principles
Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.
Installation
How to Install loading-states
Quickly install loading-states AI skill to your development environment via command line
- Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
- Run Installation Command: Copy and run this command: npx skills add https://github.com/dylantarre/animation-principles --skill loading-states
- Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Source: dylantarre/animation-principles.
SKILL.md
View rawSquash & 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.
Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working. Source: dylantarre/animation-principles.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/dylantarre/animation-principles --skill loading-states- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-03-03
- Updated
- 2026-03-10
Quick answers
How do I install loading-states?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/dylantarre/animation-principles --skill loading-states Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Where is the source repository?
https://github.com/dylantarre/animation-principles
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-03-03