用途:帮助前端界面在内容尚未加载完成时向用户提供恰当反馈,维持用户信心。
主要能力:按耗时选择指示方式(小于100ms无需指示;100ms至1s用轻微指示如透明度变化;1s至10s用骨架屏或旋转指示器;大于10s用带估算的进度条);提供骨架屏(含动画微光、文本、头像、图片及卡片骨架示例,并说明模态框、提示通知、下拉菜单等不适合使用骨架屏);提供旋转指示器(适用于内容结构未知、短操作、按钮与输入框等小区域,含按钮加载态与内联加载文本);提供进度条(适用于超过10秒的操作、文件上传下载、多步骤流程,含不确定进度动画);提供空状态(首次使用、无搜索结果、错误状态、成功型空状态,含示例结构与样式);提供最佳实践清单与可访问性处理(用aria-busy向屏幕阅读器播报加载状态、遵循prefers-reduced-motion减少动画)。
使用方式:资料以HTML与CSS示例展示实现方法,包括.skeleton、.skeleton-animated微光动画、.spinner、.button-loading、.progress与.progress-bar、.empty-state等类名及相关样式定义,可按需引用。
适用场景:网页或应用在加载页面、列表、卡片、表格、文件传输及多步骤流程时,以及需要展示首次使用、无结果或错误提示时。
限制:资料未说明任何收费、价格或具体平台支持情况;示例为通用CSS实现,实际集成方式与兼容性细节暂未提供。