"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface OrbitSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: number;
  dotSize?: number;
  duration?: number;
}

function OrbitSpinner({
  size = 48,
  dotSize = 8,
  duration = 1.8,
  className,
  ...props
}: OrbitSpinnerProps) {
  const radius = Math.max(0, size / 2 - dotSize * 1.2);
  const angles = [0, 120, 240];

  return (
    <div
      className={cn("relative text-primary", className)}
      style={{ width: size, height: size }}
      {...props}
    >
      <div className="absolute inset-0 rounded-full border border-border/60" />
      <motion.div
        className="absolute inset-0"
        animate={{ rotate: 360 }}
        transition={{ duration, repeat: Infinity, ease: "linear" }}
      >
        {angles.map((angle) => (
          <span
            key={angle}
            className="absolute left-1/2 top-1/2"
            style={{
              transform: `translate(-50%, -50%) rotate(${angle}deg) translate(${radius}px)`,
            }}
          >
            <span
              className="block rounded-full bg-current"
              style={{ width: dotSize, height: dotSize }}
            />
          </span>
        ))}
      </motion.div>
    </div>
  );
}

export { OrbitSpinner };
export type { OrbitSpinnerProps };
Orbit Spinner

Dependencies

Files

Installation
