免费在线CSS骨架屏（Skeleton Loader）生成器。可视化创建加载占位动画，自定义形状、尺寸、颜色、动画效果。一键复制CSS/HTML代码，适合前端开发者优化用户体验。纯前端，无需注册。
常见问题
什么是骨架屏（Skeleton Loader）？
骨架屏是一种加载占位UI模式，在页面内容加载完成前显示灰色的内容轮廓，模拟最终内容的布局结构，让用户知道内容即将出现，比传统的加载旋转图标提供更好的用户体验。
骨架屏生成器支持哪些形状？
支持矩形、圆形和圆角矩形三种基本形状。矩形适合文本行和卡片，圆形适合头像和图标，圆角矩形适合按钮和图片。可以组合使用创造复杂的骨架屏布局。
如何将生成的代码集成到项目中？
点击复制按钮获取CSS和HTML代码，将CSS添加到你的样式文件中，将HTML放到需要显示加载状态的位置即可。代码纯CSS实现，无需JavaScript依赖。
骨架屏的三种动画有什么区别？
闪光（Shimmer）：一道高光从左到右滑过，是最常见的骨架屏动画效果；脉冲（Pulse）：元素整体透明度在1和0.4之间变化，简洁低调；波浪（Wave）：元素高度依次变化，适合音频或内容流场景。
什么是骨架屏（Skeleton Loader）？
骨架屏是一种渐进式加载UI模式，在页面内容加载完成前，显示与最终内容布局一致的灰色占位块。相比传统的旋转加载图标，骨架屏能让用户预判内容位置，降低感知等待时间，显著提升用户体验。Facebook、LinkedIn、YouTube等主流应用都采用骨架屏作为加载方案。
骨架屏的最佳实践
1. 保持布局一致性：骨架屏的布局应该与最终内容完全一致；2. 使用柔和的动画：闪光或脉冲动画应该平滑自然，避免闪烁；3. 合理的加载时间：骨架屏显示时间不宜超过2-3秒；4. 语义化HTML：使用aria-busy和aria-label属性增强可访问性；5. 响应式设计：骨架屏应适配不同屏幕尺寸。
CSS骨架屏实现原理
骨架屏通常使用CSS线性渐变（linear-gradient）创建高光效果，配合CSS动画实现闪光或脉冲效果。闪光效果通过background-position动画移动渐变位置实现，脉冲效果通过opacity动画改变透明度实现。这种方法纯CSS实现，无需JavaScript，性能优异。