Dots Ring

A circular loader with dots arranged in a ring that pulse to show loading. It uses animation to create a smooth effect. Use it to indicate ongoing processes in a UI.

byTurboStarter from Loading UI

Installation

terminal

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

npx layro-cli add @turbostarter/dots-ring

npx layro-cli add @turbostarter/dots-ring

bunx layro-cli add @turbostarter/dots-ring

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

Code

Demo

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

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

function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(value, min), max);
}

function DotsRing({
  className,