加载状态模式

技能标识：loading-state-patterns

Patterns for skeleton loaders, shimmer effects, and loading states that match design system aesthetics. Covers skeleton components, shimmer animations, and progressive loading. Use when building polished loading experiences. Triggers on skeleton, loading state, shimmer, placeholder, loading animation.

作者：admin | 来源记录：ClawHub

加载状态模式

构建有意图的加载状态，使其与你的设计系统美学相匹配。

使用场景

- 为内容区域构建骨架加载器
为流式内容添加闪烁效果
实现渐进式加载体验
构建高级加载用户体验

模式1：骨架基础组件

tsx
import { cn } from @/lib/utils;

interface SkeletonProps extends React.HTMLAttributes {
shimmer?: boolean;
}

export function Skeleton({ className, shimmer = true, ...props }: SkeletonProps) {
return (
className={cn(
rounded-md bg-muted,
shimmer && animate-shimmer bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%],
className
)}
{...props}
/>
);
}

CSS动画

css
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

.animate-shimmer {
animation: shimmer 1.5s ease-in-out infinite;
}

模式2：内容骨架布局

卡片骨架

tsx
export function CardSkeleton() {
return (

);
}

表格行骨架

tsx
export function TableRowSkeleton({ columns = 4 }: { columns?: number }) {
return (

{Array.from({ length: columns }).map((_, i) => (

))}

);
}

指标骨架

tsx
export function MetricSkeleton() {
return (

);
}

模式3：设计系统骨架

使骨架与你的美学风格相匹配：

tsx
// 适用于复古未来主义主题
export function CyberSkeleton({ className, ...props }: SkeletonProps) {
return (
className={cn(
rounded-md bg-tone-cadet/30,
animate-pulse-glow,
border border-tone-cyan/10,
className
)}
{...props}
/>
);
}

// CSS
@keyframes pulse-glow {
0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(var(--tone-cyan), 0); }
50% { opacity: 0.6; box-shadow: 0 0 8px 0 rgba(var(--tone-cyan), 0.1); }
}

模式4：渐进式加载

在内容加载时逐步显示：

tsx
interface ProgressiveLoadProps {
isLoading: boolean;
skeleton: React.ReactNode;
children: React.ReactNode;
}

export function ProgressiveLoad({
isLoading,
skeleton,
children,
}: ProgressiveLoadProps) {
return (

{isLoading ? (
skeleton
) : (
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
>
{children}

)}

);
}

模式5：流式内容指示器

适用于AI/LLM流式内容：

tsx
export function StreamingIndicator() {
return (

{[0, 1, 2].map((i) => (
key={i}
className=size-1.5 rounded-full bg-primary
animate={{ scale: [1, 1.3, 1], opacity: [0.5, 1, 0.5] }}
transition={{
duration: 0.8,
repeat: Infinity,
delay: i * 0.15,
}}
/>
))}

);
}

模式6：加载进度条

tsx
interface LoadingProgressProps {
progress?: number; // 0-100, undefined = 不确定状态
}

export function LoadingProgress({ progress }: LoadingProgressProps) {
const isIndeterminate = progress === undefined;

return (

className={cn(
h-full bg-primary transition-all duration-300,
isIndeterminate && animate-indeterminate
)}
style={!isIndeterminate ? { width: ${progress}% } : undefined}
/>

);
}

// CSS
@keyframes indeterminate {
0% { transform: translateX(-100%); width: 50%; }
100% { transform: translateX(200%); width: 50%; }
}

.animate-indeterminate {
animation: indeterminate 1.5s ease-in-out infinite;
}

模式7：骨架网格

tsx
export function GridSkeleton({
count = 6,
columns = 3
}: {
count?: number;
columns?: number;
}) {
return (

className=grid gap-4
style={{ gridTemplateColumns: repeat(${columns}, 1fr) }}
>
{Array.from({ length: count }).map((_, i) => (

))}

);
}

绝对不要做

- 在深色主题上使用灰色骨架 — 匹配你的表面颜色
跳过闪烁动画 — 静态块看起来像损坏的
让骨架尺寸完全精确 — 轻微尺寸变化是自然的
忘记宽高比 — 图片需要一致的骨架比例
永远显示骨架 — 为错误添加超时回退

快速参考

tsx
// 基础骨架

// 头像骨架

// 文本行

// 卡片骨架

加载状态模式