Orbit
No library Intermediate
A dot orbits a center point along a faint circular track. Pure CSS rotation, no dependencies.
LLM Prompt
Goal: Create an "Orbit" loader animation.
Visual behavior: A 48×48px container with a faint circular track ring. A small solid dot (10px) orbits the center continuously at constant speed (~1.2s per revolution). A dimmer center dot (8px) anchors the composition. Together they suggest a planet-and-moon or electron-orbit concept.
Technique: The container is relative + flex-center. The track ring is absolute inset-0, border-radius 50%, low-opacity border. The center dot is absolute. The rotating arm is a zero-size absolute div at the container's center; its child dot is translated up by the orbital radius (20px), so when the arm rotates the dot orbits. Transform-origin is the arm's center point (the container center). GPU-only rotation — no width/height animation.
Accessibility: role="status" and aria-label on the wrapper. Orbit animation disabled under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.