mcpField
L
loading-states

loading-states

github.com/dylantarre设计与 UI134572 次安装43 周前更新
代码仓库

关于 loading-states

这是一项设计技能，运用 Disney 的 12 项动画原则制作传达系统活动状态的加载动画，并提供指示器、骨架屏和内容过渡的时序与实现建议。

主要功能

  1. 01将 12 项原则用于加载反馈
  2. 02提供不同加载类型的时序建议
  3. 03涵盖旋转指示器、进度条和骨架屏
  4. 04指导从加载状态过渡到内容
  5. 05建议减少动态效果时使用静态指示器

适用场景

  1. 01确定何时显示加载指示器
  2. 02设计与内容布局匹配的骨架屏
  3. 03避免加载结束后内容突兀出现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill loading-states

安装后在 Claude Code 中输入/loading-states确认已加载。

详细介绍

加载状态动画

运用迪士尼的 12 条原则传达系统活动状态。

原则应用

挤压与拉伸：进度指示器可以通过脉动或呼吸效果展现活力。轻微地缩放摆动（0.98-1.02）。

预备动作：操作后立即显示加载状态。不要等到响应缓慢时才显示旋转指示器。

演出布局：加载指示器应出现在内容将要显示的位置。骨架屏应与最终布局一致。

逐帧动画与姿势动画：将加载设计为一系列阶段：即时显示指示器 → 显示进度 → 完成 → 显示内容。

跟随动作与重叠动作：内容进入时，加载状态逐渐淡出。转场重叠 100ms。

慢入慢出：已知百分比的进度条使用缓入缓出效果。无确定进度时使用平滑摆动。

弧形运动：圆形旋转指示器应沿真正的圆形路径运动。避免旋转卡顿。

次要动作：骨架屏闪烁效果 + 轻微脉动。多种信号共同强化“正在加载”的提示。

时间安排：

  • 延迟 200ms 后显示旋转指示器（避免快速加载时闪现）
  • 最短显示时间：500ms（避免突兀闪现）
  • 骨架屏闪烁周期：1500-2000ms

夸张：保持克制——加载动画不应分散注意力，只需让用户安心。

立体造型：骨架屏应与内容比例一致。形状不匹配会破坏视觉效果。

吸引力：加载过程应让人感到乐观，而非枯燥。平滑的运动能传达进展。

时间建议

加载类型显示延迟最短显示时间动画周期
旋转指示器200ms500ms700-800ms
进度条0ms-平滑填充
骨架屏0ms500ms1500ms 闪烁
按钮旋转指示器0ms400ms600ms
整页加载100ms800ms1000ms

实现模式

/* 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);
  }
}

关键规则

  1. 延迟 200ms 显示旋转指示器，避免闪现
  2. 显示后至少保持加载状态 500ms
  3. 骨架屏形状必须与实际内容尺寸一致
  4. 从加载状态平滑过渡到内容——绝不能突然切换
  5. 遵循 prefers-reduced-motion——改为显示静态指示器

评论

支持 Markdown