Slingshot

Run this command in any project set up with shadcn.

Added the @loadercn registry? Use the short form:

Then add it to your interface:

import { OrbitSlingshot } from "@/components/ui/orbit-slingshot"

<OrbitSlingshot size={48} speed={1.6} />

Inherits text color. Accepts className, style, and a custom loading label. Respects reduced-motion preferences.

import type { CSSProperties, ComponentProps } from "react"

export type OrbitSlingshotProps = ComponentProps<"span"> & {
  size?: number
  /** Duration of one complete cycle, in seconds. */
  speed?: number
  label?: string
}

export function OrbitSlingshot({
  size = 40,
  speed = 1.6,
  label = "Loading",
  className,
  style,
  ...props
}: OrbitSlingshotProps) {
  return (
    <span
      role="status"
      aria-label={label}
      {...props}
      className={["orbit-slingshot-loader", className]
        .filter(Boolean)
        .join(" ")}
      style={
        {
          width: size,
          height: size,
          "--loader-duration": `${Math.max(0.1, speed)}s`,
          ...style,
        } as CSSProperties
      }
    >
      <span aria-hidden="true" className="orbit-slingshot-loader-system">
        <span className="orbit-slingshot-loader-track" />
        <span className="orbit-slingshot-loader-star" />
        <span className="orbit-slingshot-loader-dot" />
      </span>
      <style>{`
        .orbit-slingshot-loader { display: inline-flex; flex-shrink: 0; }
        .orbit-slingshot-loader-system { position: relative; width: 100%; height: 100%; }
        .orbit-slingshot-loader-track { position: absolute; inset: 27.2% 12%; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 50%; }
        .orbit-slingshot-loader-star, .orbit-slingshot-loader-dot { position: absolute; transform: translate(-50%, -50%); background: currentColor; border-radius: 50%; }
        .orbit-slingshot-loader-star { left: 80.4%; top: 50%; width: 9%; height: 9%; opacity: .45; }
        .orbit-slingshot-loader-dot { left: 12%; top: 50%; width: 11%; height: 11%; animation: orbit-slingshot-loader-orbit var(--loader-duration) linear infinite; }
        @keyframes orbit-slingshot-loader-orbit { 0.0000% { left: 88.0000%; top: 50.0000%; } 1.5625% { left: 84.4434%; top: 59.6310%; } 3.1250% { left: 78.3263%; top: 65.1981%; } 4.6875% { left: 72.3788%; top: 68.4268%; } 6.2500% { left: 66.9363%; top: 70.4102%; } 7.8125% { left: 61.9793%; top: 71.6374%; } 9.3750% { left: 57.4474%; top: 72.3578%; } 10.9375% { left: 53.2855%; top: 72.7146%; } 12.5000% { left: 49.4484%; top: 72.7976%; } 14.0625% { left: 45.9000%; top: 72.6669%; } 15.6250% { left: 42.6114%; top: 72.3649%; } 17.1875% { left: 39.5592%; top: 71.9225%; } 18.7500% { left: 36.7242%; top: 71.3633%; } 20.3125% { left: 34.0904%; top: 70.7055%; } 21.8750% { left: 31.6443%; top: 69.9636%; } 23.4375% { left: 29.3748%; top: 69.1493%; } 25.0000% { left: 27.2720%; top: 68.2723%; } 26.5625% { left: 25.3278%; top: 67.3408%; } 28.1250% { left: 23.5350%; top: 66.3614%; } 29.6875% { left: 21.8874%; top: 65.3403%; } 31.2500% { left: 20.3797%; top: 64.2825%; } 32.8125% { left: 19.0072%; top: 63.1924%; } 34.3750% { left: 17.7659%; top: 62.0742%; } 35.9375% { left: 16.6522%; top: 60.9313%; } 37.5000% { left: 15.6632%; top: 59.7670%; } 39.0625% { left: 14.7962%; top: 58.5843%; } 40.6250% { left: 14.0491%; top: 57.3859%; } 42.1875% { left: 13.4199%; top: 56.1744%; } 43.7500% { left: 12.9071%; top: 54.9521%; } 45.3125% { left: 12.5096%; top: 53.7214%; } 46.8750% { left: 12.2263%; top: 52.4843%; } 48.4375% { left: 12.0565%; top: 51.2432%; } 50.0000% { left: 12.0000%; top: 50.0000%; } 51.5625% { left: 12.0565%; top: 48.7568%; } 53.1250% { left: 12.2263%; top: 47.5157%; } 54.6875% { left: 12.5096%; top: 46.2786%; } 56.2500% { left: 12.9071%; top: 45.0479%; } 57.8125% { left: 13.4199%; top: 43.8256%; } 59.3750% { left: 14.0491%; top: 42.6141%; } 60.9375% { left: 14.7962%; top: 41.4157%; } 62.5000% { left: 15.6632%; top: 40.2330%; } 64.0625% { left: 16.6522%; top: 39.0687%; } 65.6250% { left: 17.7659%; top: 37.9258%; } 67.1875% { left: 19.0072%; top: 36.8076%; } 68.7500% { left: 20.3797%; top: 35.7175%; } 70.3125% { left: 21.8874%; top: 34.6597%; } 71.8750% { left: 23.5350%; top: 33.6386%; } 73.4375% { left: 25.3278%; top: 32.6592%; } 75.0000% { left: 27.2720%; top: 31.7277%; } 76.5625% { left: 29.3748%; top: 30.8507%; } 78.1250% { left: 31.6443%; top: 30.0364%; } 79.6875% { left: 34.0904%; top: 29.2945%; } 81.2500% { left: 36.7242%; top: 28.6367%; } 82.8125% { left: 39.5592%; top: 28.0775%; } 84.3750% { left: 42.6114%; top: 27.6351%; } 85.9375% { left: 45.9000%; top: 27.3331%; } 87.5000% { left: 49.4484%; top: 27.2024%; } 89.0625% { left: 53.2855%; top: 27.2854%; } 90.6250% { left: 57.4474%; top: 27.6422%; } 92.1875% { left: 61.9793%; top: 28.3626%; } 93.7500% { left: 66.9363%; top: 29.5898%; } 95.3125% { left: 72.3788%; top: 31.5732%; } 96.8750% { left: 78.3263%; top: 34.8019%; } 98.4375% { left: 84.4434%; top: 40.3690%; } 100.0000% { left: 88.0000%; top: 50.0000%; } }
        @media (prefers-reduced-motion: reduce) { .orbit-slingshot-loader-dot { animation: none; } }
      `}</style>
    </span>
  )
}

Copy the complete file into your components directory. Styles are included.