Spokes

A spinning loader with spoke-like elements rendered as SVG paths. It rotates continuously using an animation to indicate AI processing. Use it to show loading states during AI operations.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/spokes

npx layro-cli add @turbostarter/spokes

npx layro-cli add @turbostarter/spokes

bunx layro-cli add @turbostarter/spokes

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

Code

Demo

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

function Spokes({ className, style, ...props }: React.ComponentProps<"svg">) {
  return (
    <>
      <style>{`
        @keyframes loading-ui-spokes-spin {
          to {
            transform: rotate(360deg);
          }
        }
      `}</style>
      <svg
        viewBox="0 0 24 24"