Usage
The ChatShimmer component renders an element with an animated shimmer gradient over text, commonly used to indicate streaming or loading states in chat interfaces.
This component is automatically used by the
ChatTool and ChatReasoning components when streaming.Text
Use the text prop to set the shimmer text.
Thinking...
<template>
<B24ChatShimmer text="Thinking..." />
</template>
Duration
Use the duration prop to control the animation speed in seconds.
Thinking...
<template>
<B24ChatShimmer text="Thinking..." :duration="4" />
</template>
Spread
Use the spread prop to control the width of the shimmer highlight. The actual spread is computed as text.length * spread in pixels.
Thinking...
<template>
<B24ChatShimmer text="Thinking..." :spread="5" />
</template>
Examples
API
Props
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/chat-shimmer.ts
export default {
base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]'
}