Shimmer
微光扫过动画组件,常用于等待态或加载占位。
代码演示
切换加载态,观察占位文本的微光动画;加载完成后占位被真实内容替换:
正在思考...
加载中
慢速扫光
duration 控制单次扫光周期(毫秒,默认 2000),适合长耗时操作,用更慢的节奏降低等待焦躁感:
检索知识库中(慢速扫光 3.5s)...
基础用法
vue
<Shimmer as="div" style="height: 16px; width: 60%">正在思考...</Shimmer>API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| as | string | 'span' | 渲染的 HTML 标签名 |
| duration | number | 2000 | 单次扫光动画周期(ms) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 占位内容(加载完成后被真实内容替换的那段文本) |
CSS 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --ai-chat-color-accent | #6366f1 | 微光渐变色 |