generative-loaders

专为 AI 生成界面打造的 React 加载态组件，让流式输出不再空白焦虑

generative-loaders 是一个面向生成式 AI 界面的 React 加载状态组件库，用 TypeScript 编写。它解决的核心问题是：传统 loading 组件（转圈、骨架屏）无法表达 AI 生成过程的特殊性——文字是逐字流式输出的、图像是逐步渲染的、工具调用是分阶段进行的，而用户需要知道系统正在做什么、进度如何。项目提供三类加载态：流式文本加载、内联活动指示、图像生成占位，并强调无障碍支持（ARIA 属性、屏幕阅读器友好、减少动画偏好适配）。组件基于 Framer Motion 实现动画，可开箱即用，也能按需定制样式，适合正在构建聊天机器人、AI 写作、文生图等生成式产品的团队，让等待过程从焦虑变为可感知的反馈。

开源 unknown 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 200

维护状态活跃

是否开源是

定价模式 unknown

项目数据

分类设计创意

开发团队kasturikhanke

所属国家

官网地址https://generativeloaders.com

GitHubhttps://github.com/kasturikhanke/generative-loaders

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型accessibility,ai,animation,framer-motion,generative-ui,loader,react,typescript

GitHub 星标★ 200

30天Star增速

HF 下载量

上线时间2026-08-08 00:00:00

最近更新2026-09-18 00:00:00

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-09-16

浏览次数0

使用教程

核心亮点

针对流式文本、图像生成、内联活动三类 AI 场景提供专用加载组件，而非通用转圈
内置无障碍支持，适配屏幕阅读器和 prefers-reduced-motion，生成式产品中少见
基于 Framer Motion，动画流畅且可定制，TypeScript 类型完整

不足之处

项目处于早期，组件数量和文档完善度有限，复杂场景需自行扩展
仅支持 React 生态，非 React 项目无法直接使用

适用场景

AI 聊天应用中等待模型逐字回复时的流式文本占位
文生图工具中图片逐步生成时的渐进式加载动画
AI Agent 执行多步工具调用时展示当前活动状态

替代项目

react-loading-skeleton、lottie-react

项目介绍

generative-loaders 是一个设计创意领域的开源项目，官方简介：Accessible React loading states for generative interfaces: streamed text, inline activity, and image generation.。项目使用 TypeScript 开发，在 GitHub 上获得 199 星标。

上一篇：upage

下一篇：没有了！