LoadersNew
AI Text Loading
A thinking status for AI chat: words swap with a blur and a soft brightness wave runs through the letters.
Customize
gradientFrom
gradientTo
waveColor
Based on AI Text Loading (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| texts | string[] | "[\"Thinking...\", \"Processing...\", \"Analyzing...\", \"Computing...\", \"Almost...\"]" | Words that replace each other. |
| interval | number | 1500 | How long one word stays, in milliseconds. |
| showElapsed | boolean | false | Show the seconds waited next to the word. |
| label | string | "Loading" | Steady text for screen readers. |
| className | string | — | Classes for the wrapper. |
| gradientFrom | string | "#ffffff" | Colour of the first letter. The text fades into the gradient end colour. |
| gradientTo | string | "#d4d4d8" | Colour of the last letter, the end of the gradient. |
| waveColor | string | "#ffffff" | Colour the letters pass through as the wave runs over them. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge