Feedback
加载骨架屏
用于卡片、表格和内容占位符的加载骨架屏,带有闪光动画。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create a loading skeleton screen for a dashboard page. Include a skeleton navbar, 4 stat cards with placeholder numbers, a large chart placeholder, and a data table placeholder with 5 rows. Use shadcn/ui Skeleton component and Tailwind CSS. Add a shimmer/pulse animation and ensure the skeleton layout matches the real content dimensions to avoid layout shift.
中文提示词
为仪表盘页面创建一个加载骨架屏。包含骨架导航栏、4 个带占位数字的统计卡片、一个大型图表占位符和 5 行数据表格占位符。使用 shadcn/ui Skeleton 组件和 Tailwind CSS。添加闪光/脉冲动画,并确保骨架布局与真实内容尺寸一致以避免布局偏移。

概述
一个适用于仪表盘风格页面的骨架加载模式。减少感知加载时间并防止布局偏移。
功能特性
- 骨架导航栏
- 4 个统计卡片占位符
- 图表占位符
- 数据表格占位符
- 闪光/脉冲动画
- 布局与真实内容一致
使用方法
将提示词复制到 v0 或 Cursor 中。替换骨架结构以匹配你的真实仪表盘布局。
自定义选项
修改提示词以:
- 添加卡片、列表或个人资料骨架
- 使用闪光渐变替代脉冲
- 在演示中切换骨架和真实数据
- 为内容添加延迟淡入