Text Dots

Renders animated text dots to indicate loading or processing. Displays a series of dots that pulse in sequence. Use for AI thinking states or loading indicators.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/text-dots

npx layro-cli add @turbostarter/text-dots

npx layro-cli add @turbostarter/text-dots

bunx layro-cli add @turbostarter/text-dots

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { cn } from "@/lib/utils";

type TextDotsProps = React.ComponentProps<"span"> & {
  dots?: number;
};

function TextDots({
  className,
  children,
  dots = 3,
  style,
  ...props
}: TextDotsProps) {
  const dotCount = Number.isFinite(dots) ? Math.max(1, Math.floor(dots)) : 3;