Bobbing Dots

A loading indicator with bouncing dots animation. Renders a series of animated dots that move up and down. Use for indicating processing or loading states in AI interfaces.

byTurboStarter from Loading UI

Installation

terminal

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

npx layro-cli add @turbostarter/bobbing-dots

npx layro-cli add @turbostarter/bobbing-dots

bunx layro-cli add @turbostarter/bobbing-dots

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

Code

Demo

"use client";

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

function BobbingDots({
  className,
  dots = 3,
  duration = 1,
  ...props
}: React.ComponentProps<"span"> & { dots?: number; duration?: number }) {
  const transition = (index: number) => ({
    duration,
    repeat: Infinity,