Spiral

A spiral loader with dots arranged in a circle that animate to show a loading state. It uses motion animations to create a smooth, repeating effect. The dots scale and fade in a circular pattern. Use it to indicate loading in user interfaces.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/spiral

npx layro-cli add @turbostarter/spiral

npx layro-cli add @turbostarter/spiral

bunx layro-cli add @turbostarter/spiral

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 Spiral({
  dots = 8,
  radius = 31.25,
  className,
  ...props
}: React.ComponentProps<"span"> & { dots?: number; radius?: number }) {
  return (
    <span
      role="status"