Text dots

TextDots appends animated dots to ordinary status copy. It is the lightest text loader in the set: useful for short waits, inline labels, disabled actions, and places where a graphic spinner would pull too much attention.

import { TextDots } from "@/components/loading-ui/text-dots";

export function TextDotsDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/text-dots
Copy

Usage

Copyimport { TextDots } from "@/components/loading-ui/text-dots";

Copy<TextDots>Thinking</TextDots>

Customization

TextDots keeps your copy as normal text and only animates the appended marks. Use it when the wording matters more than the animation.

Color

The text and dots inherit currentColor, so the component works naturally inside buttons, badges, alerts, and muted helper text.

import { TextDots } from "@/components/loading-ui/text-dots";

export function TextDotsColor() {

Dot Count

Three dots are the default. Use fewer for very compact labels, or more when the status should feel a little longer-running.

import { TextDots } from "@/components/loading-ui/text-dots";

export function TextDotsCount() {

Duration

Tune --duration and --delay with CSS time values.

import { TextDots } from "@/components/loading-ui/text-dots";

export function TextDotsDuration() {

Examples

These examples keep the animation attached to status copy instead of treating it as a standalone loader.

Button

Use TextDots when the button label itself is the loading state.

import { Button } from "@/components/ui/button";
import { TextDots } from "@/components/loading-ui/text-dots";

Badge

Status chips stay compact because the animated marks do not need icon space.

import { Badge } from "@/components/ui/badge";
import { TextDots } from "@/components/loading-ui/text-dots";

Input Group

Input addons are a natural place for search, generation, and validation copy.

import {
  InputGroup,
  InputGroupAddon,

Alert

In alerts, the title can carry the active state while the description explains what is still happening.

import {
  Alert,
  AlertDescription,