ThinkingIndicator 思考指示器

用于 AI 应用中表示模型正在思考或生成内容的加载动画。

基础用法

默认使用 dots 动画变体。

正在思考...

<script setup>
import ThinkingIndicator from '@/vue/components/ThinkingIndicator.vue'
</script>
<template>
  <ThinkingIndicator />
</template>

动画变体

提供三种动画变体：dots（弹跳圆点）、pulse（脉冲）、wave（波浪条）。

Dots

Pulse

Wave

<script setup>
import ThinkingIndicator from '@/vue/components/ThinkingIndicator.vue'
</script>
<template>
  <div style="display: flex; gap: 24px; align-items: center;">
    <ThinkingIndicator variant="dots" text="Dots" />
    <ThinkingIndicator variant="pulse" text="Pulse" />
    <ThinkingIndicator variant="wave" text="Wave" />
  </div>
</template>

不同尺寸

通过 size 属性设置不同尺寸。

Small

Default

Large

<script setup>
import ThinkingIndicator from '@/vue/components/ThinkingIndicator.vue'
</script>
<template>
  <div style="display: flex; gap: 24px; align-items: center;">
    <ThinkingIndicator size="small" text="Small" />
    <ThinkingIndicator size="default" text="Default" />
    <ThinkingIndicator size="large" text="Large" />
  </div>
</template>

React 用法

import { ThinkingIndicator } from '@bobocn/element/react'
import '@bobocn/element/style.css'

function App() {
  return (
    <div>
      <ThinkingIndicator />
      <ThinkingIndicator variant="pulse" text="Pulse" />
      <ThinkingIndicator variant="wave" size="large" />
    </div>
  )
}

API

属性 (Attributes)

属性名	说明	类型	默认值
variant	动画变体	'dots' | 'pulse' | 'wave'	'dots'
text	提示文本	string	'正在思考...'
size	尺寸	'small' | 'default' | 'large'	'default'
ariaLabel	无障碍标签	string	'AI 正在思考'