Circle Ping: a loader for api and tool calls

A circle of dots sends a ring out and gets a faint echo back. A React loader for an API call, tool call or MCP request.

Installation

Install with the shadcn CLI, or copy the component file. It only needs React.

npx shadcn@latest add https://oxyn.space/r/circle-ping.json

Updates live with the parameters you set.

import { CirclePing } from "@/components/circle-ping";

export function Thinking() {
  return (
    <CirclePing />
  );
}

Prop	Type	Default	Description
dotShape	"round"\|"square"	"round"	Shape of each dot.
dotSize	number	2.5	Resting dot size in px.
scale	number	1.5	How many times larger a dot grows at the peak of the animation.
density	number	11	Dots across the width of the sheet.
size	number	160	Width and height of the orb in px.
duration	number	0.9	Seconds for the ping to reach the edge, and for the echo to come back.
wait	number	0.35	Seconds between the ping reaching the edge and the echo setting off back.
gap	number	0.5	Seconds to rest after the echo lands, before the next ping.
ringWidth	number	0.3	Thickness of the ring of large dots, as a fraction of the sheet radius.
minOpacity	number	0.25	Opacity of resting dots. Dots inside the outgoing ring are always fully opaque.
color	string	"#e4e4e7"	Dot color.
paused	boolean	false	Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed.
label	string	"Thinking"	Accessible name; the wrapper is role="status".
className / style	—	—	Spread onto the wrapper div, along with any other div props.

Circle Ping is one of the animations in Dot Circle. Use the group when the agent's state changes, and it morphs between them.