UI Components
骨架屏闪光加载
为卡片、文字行和头像提供动画对角闪光的高级骨架屏加载占位符。
作者:mcpskills
框架
reacttailwind
UI 库
feedback
难度intermediate
英文提示词
Create a premium skeleton loading placeholder. Use a card-like area with rounded-2xl light gray background and a subtle border. Inside, include a circular avatar skeleton, several rounded text-line skeletons of varying widths, and a rectangular image skeleton. Apply a diagonal shimmer animation: a gradient mask that moves continuously from top-left to bottom-right, using white/30 to white/0. The animation should be smooth and infinite. Add a second variant showing a list of rows, each with a circle skeleton on the left and two line skeletons on the right. Use no emojis, only CSS gradients and animations. The overall feel should be polished and modern, not blocky.
中文提示词
创建一个高级骨架屏加载占位符。使用一个 rounded-2xl 浅灰色背景和细边框的卡片区域。内部包含一个圆形头像骨架、几条宽度不一的圆角文字线骨架和一个矩形图片骨架。应用对角闪光动画:一个渐变遮罩从左上到右下持续移动,使用 white/30 到 white/0。动画应平滑且无限循环。添加第二种变体:展示一行行列表,每行左侧是圆形骨架,右侧是两条线骨架。不使用 emoji,仅使用 CSS 渐变和动画。整体应感觉精致现代,不死板。

Skeleton loader with diagonal shimmer animation for cards and lists.