メニュー
Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/dylantarre/animation-principles --skill loading-statesコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
| name | loading-states |
| description | Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working. |
Apply Disney's 12 principles to communicate system activity.
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:
Exaggeration: Keep minimal - loading shouldn't distract, just reassure.
Solid Drawing: Skeletons should match content proportions. Wrong shapes break the illusion.
Appeal: Loading should feel optimistic, not tedious. Smooth motion suggests progress.
| Loading Type | Appear Delay | Min Display | Animation Cycle |
|---|---|---|---|
| Spinner | 200ms | 500ms | 700-800ms |
| Progress Bar | 0ms | - | smooth fill |
| Skeleton | 0ms | 500ms | 1500ms shimmer |
| Button Spinner | 0ms | 400ms | 600ms |
| Full Page | 100ms | 800ms | 1000ms |
/* Skeleton shimmer */
.skeleton {
background: linear-gradient(
90deg,
#e0e0e0 0%,
#f0f0f0 50%,
#e0e0e0 100%
);
background-size: 200% 100%;
animation: shimmer 1500ms ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Spinner with smooth rotation */
.spinner {
animation: spin 700ms linear infinite;
opacity: 0;
animation: fade-in 200ms 200ms ease-out forwards, spin 700ms linear infinite;
}
/* Progress bar with easing */
.progress-fill {
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.content-enter {
animation: content-reveal 300ms ease-out forwards;
}
@keyframes content-reveal {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
prefers-reduced-motion - show static indicator instead