loading-states

用途

loading-states 用于在界面需要向用户传达“系统正在工作”时，提供加载状态动画的设计与实现指导。适用对象包括旋转指示器（spinner）、进度条、骨架屏（skeleton screen）、微光（shimmer）效果，以及任何表示等待或进度的动画。该技能的核心思路是把迪士尼十二动画原则应用到加载状态中，让等待过程更自然、更少干扰。

主要能力

技能将十二动画原则逐条映射到加载状态场景：

挤压与拉伸（Squash & Stretch）：进度指示器可通过轻微缩放振荡（0.98-1.02）脉动或呼吸，体现“有生命”的感觉。
预期（Anticipation）：操作发生时立即显示加载状态，不要等响应变慢才显示 spinner。
舞台布置（Staging）：加载指示器出现在内容将要出现的位置，骨架屏匹配最终布局。
顺画法与摆姿势（Straight Ahead vs Pose-to-Pose）：把加载设计为序列——即时指示器 → 进度 → 完成 → 内容。
跟随与重叠（Follow Through & Overlapping）：加载淡出与内容进入重叠约 100ms。
缓入缓出（Slow In/Slow Out）：进度条在已知百分比之间使用 ease-in-out；不确定进度使用平滑振荡。
弧线（Arcs）：圆形 spinner 沿真正的圆形路径运动，避免生硬旋转。
次要动作（Secondary Action）：骨架微光叠加轻微脉动，用多重信号强化“加载中”。
夸张（Exaggeration）：保持最小化，加载不应分散注意力，只需让人安心。
扎实的绘画（Solid Drawing）：骨架形状应匹配内容比例，形状错误会破坏错觉。
吸引力（Appeal）：加载应让人感到乐观而非乏味，平滑运动暗示进展。

使用方式

技能给出了具体的时间建议表：

加载类型	出现延迟	最短显示	动画周期
Spinner	200ms	500ms	700-800ms
进度条	0ms	-	平滑填充
骨架屏	0ms	500ms	1500ms 微光
按钮 Spinner	0ms	400ms	600ms
整页加载	100ms	800ms	1000ms

技能还提供了实现模式代码，包括骨架屏微光、平滑旋转 spinner、带缓动的进度条，以及加载到内容的过渡：

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

适用场景

适用于任何需要向用户反馈系统正在处理或等待的界面，例如页面加载、数据请求、按钮提交、内容占位等。尤其适合希望加载动画与整体动效风格保持一致、并遵循成熟动画原则的前端与设计场景。

限制

技能强调若干关键规则：spinner 延迟 200ms 出现以避免闪烁；一旦显示，加载状态至少保持 500ms；骨架形状必须匹配真实内容尺寸；从加载到内容要平滑过渡，不能突然弹出；必须尊重 prefers-reduced-motion，此时应显示静态指示器。关于该技能的具体平台支持、收费方式、安装命令等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制