A spinner says something is happening. oxyn says what.
An agent interface usually knows what it's waiting on: a file being read, a command running, a tool call out to an API. oxyn is a library of 56 animated React loaders that give each of those states its own motion, so people can tell them apart at a glance.
Principles
The rules every loader follows.
One motion per state
Every loader is drawn for a specific thing an agent does: reading, editing, searching, calling a tool, waiting on you. Not just to look busy.
States glide, never cut
Each row ships as one group component. Change its animation prop and the same dots or bars morph from one motion into the next.
Quiet by default
Every loader renders role="status" with a label, holds still under prefers-reduced-motion, and coasts to a stop when paused.
You own the file
Installed with the shadcn CLI as one self-contained file that imports only from react. Read it, edit it, keep it.
The rows
6 shapes, each with its own set of motions.
Where it stops
oxyn is for indeterminate waits in React. It doesn't cover:
- Determinate progress bars
- Skeleton screens
- Vue, Svelte or plain HTML
For assistants
An MCP server lets an assistant pick a loader by what your agent is doing, then install it.
{ "mcpServers": { "oxyn": { "type": "http", "url": "https://oxyn.space/mcp" } } }Prefer docs? The whole library is in llms.txt and llms-full.txt.
Who
oxyn is built by lokidotdev. It's early and pre-1.0, so props may still change between releases. MIT licensed; bug reports, new states and new animations are welcome.