Twin Orbit

A dual orbit loader animation that rotates to show loading or processing. It uses two overlapping circular elements with a rotating effect. Use it in AI interfaces to indicate ongoing activity or data processing.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/twin-orbit

npx layro-cli add @turbostarter/twin-orbit

npx layro-cli add @turbostarter/twin-orbit

bunx layro-cli add @turbostarter/twin-orbit

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

Code

Demo

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

function TwinOrbit({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <>
      <style>{`
        @keyframes loading-ui-twin-orbit-rotate {
          100% {
            transform: rotate(360deg) translate(155%);
          }
        }
      `}</style>
      <span
        role="status"