Back to Details

loading-states

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Loading State Animations

加载状态动画

Apply Disney's 12 principles to communicate system activity.
运用迪士尼12动画原则来传达系统的运行状态。

Principle Application

原则应用

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:
  • Show spinner after 200ms delay (avoid flash for fast loads)
  • Minimum display: 500ms (prevent jarring flash)
  • Skeleton shimmer cycle: 1500-2000ms
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.
挤压与拉伸（Squash & Stretch）：进度指示器可通过脉动/呼吸效果展现活力。设置轻微的缩放波动（0.98-1.02）。
预备动作（Anticipation）：触发操作后立即显示加载状态，不要等响应变慢才展示spinner。
分阶段呈现（Staging）：加载指示器出现在内容即将展示的位置。骨架屏需与最终布局匹配。
逐帧动画与关键帧动画（Straight Ahead vs Pose-to-Pose）：将加载过程设计为一个序列：即时显示指示器 → 进度更新 → 完成 → 展示内容。
跟随动作与重叠动作（Follow Through & Overlapping）：内容进入时，加载状态逐渐淡出。让过渡效果重叠100ms。
缓入缓出（Slow In/Slow Out）：进度条在已知百分比间采用缓入缓出动画。不确定进度的加载使用平滑的循环动画。
弧线运动（Arcs）：圆形spinner遵循标准的圆形路径，避免卡顿的旋转效果。
次要动作（Secondary Action）：骨架屏微光效果+轻微脉动。多重信号强化“正在加载”的提示。
时间节奏（Timing）:
  • 延迟200ms后显示spinner（避免快速加载时的闪烁）
  • 最小显示时长：500ms（防止突兀的闪显）
  • 骨架屏微光周期：1500-2000ms
夸张（Exaggeration）：保持适度——加载动画不应分散注意力，只需起到安抚作用。
造型坚实（Solid Drawing）：骨架屏需匹配真实内容的比例。错误的形状会打破视觉错觉。
吸引力（Appeal）：加载状态应给人乐观的感受，而非繁琐感。流畅的动效暗示着正在推进。

Timing Recommendations

时间节奏建议

Loading TypeAppear DelayMin DisplayAnimation Cycle
Spinner200ms500ms700-800ms
Progress Bar0ms-smooth fill
Skeleton0ms500ms1500ms shimmer
Button Spinner0ms400ms600ms
Full Page100ms800ms1000ms
加载类型出现延迟最小显示时长动画周期
Spinner200ms500ms700-800ms
进度条0ms-平滑填充
Skeleton0ms500ms1500ms 微光
按钮Spinner0ms400ms600ms
整页加载100ms800ms1000ms

Implementation Patterns

实现模式

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

Loading-to-Content Transition

加载到内容的过渡效果

css
.content-enter {
  animation: content-reveal 300ms ease-out forwards;
}

@keyframes content-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
css
.content-enter {
  animation: content-reveal 300ms ease-out forwards;
}

@keyframes content-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Key Rules

核心规则

  1. Delay spinner appearance by 200ms to avoid flash
  2. Keep loading visible minimum 500ms once shown
  3. Skeleton shapes must match real content dimensions
  4. Transition smoothly from loading to content - never pop
  5. Respect 
    prefers-reduced-motion
    - show static indicator instead
  1. 延迟200ms显示spinner，避免闪烁
  2. 加载状态一旦显示，至少保持可见500ms
  3. 骨架屏的形状必须与真实内容的尺寸匹配
  4. 从加载状态到内容的过渡需平滑——绝对不能突然切换
  5. 尊重
    prefers-reduced-motion
    属性：若开启则显示静态指示器