加载状态模式

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

使用场景

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

模式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 (

模式5：流式内容指示器

适用于AI/LLM流式内容：

tsx
export function StreamingIndicator() {
return (

模式6：加载进度条

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

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

return (

// 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 (

相关技能

• - 元技能： ai/skills/meta/design-system-creation/ — 完整的设计系统工作流程
• 独特设计系统 — 主题化骨架的美学匹配

绝对不要做

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

快速参考

tsx
// 基础骨架

// 头像骨架

// 文本行

// 卡片骨架