@vikast908/loaders

OrbUX loaders for agent and AI interfaces.

This package contains the full loader catalog across CSS, Canvas 2D, and WebGL tiers. Import the package root to register every loader, or import a subpath to register just one.

Install

npm install @vikast908/[email protected] @vikast908/[email protected]

Published on npm as @vikast908/loaders (depends on @vikast908/core). Prefer 0.2.2 or newer. 0.1.0 incorrectly listed @orbux/core@workspace:* and does not install cleanly. In this monorepo after a workspace build, the same imports work via workspace:* linking.

Use

import '@vikast908/loaders/pulse-orb';
import '@vikast908/loaders/pulse-dots';

const orb = document.querySelector('orbux-pulse-orb');
orb.state = 'thinking'; // idle | thinking | streaming | tool-calling | waiting | done | error | cancelled
orb.progress = 0.6;      // optional 0..1 for determinate loaders
orb.pulse();             // optional: call per streamed token to track real throughput

orb.addEventListener('orbux:statechange', (e) => console.log(e.detail.previous, '→', e.detail.state));

@import "@vikast908/loaders/preflight.css";

<!-- show-label renders a visible caption; quiet silences the ARIA live region -->
<orbux-pulse-orb state="streaming" size="140px" show-label label="Generating…"></orbux-pulse-orb>

Every loader reacts to all eight agent states, is themeable through --orbux-* (including --orbux-color-cancelled), and inherits reduced-motion, role="status", debounced screen-reader announcements, and offscreen pause from @vikast908/core. To map an SDK onto the state model, use the @vikast908/core/adapters entry point (Vercel AI SDK, AG-UI, OpenAI streaming).

Subpath exports

Every loader is available as @vikast908/loaders/<id> (for example @vikast908/loaders/ember-flame). The package also exports preflight.css for layout stability before custom elements upgrade.

Standalone HTML

The gallery build writes a self-contained HTML file per loader at apps/site/public/orbux/<id>.html (minified browser bundle inlined). On a detail page: Download HTML saves the file; Copy HTML puts the markup on the clipboard and shows ✓ Copied or Copy failed. You can also open the HTML file in a browser.

Workspace

In this monorepo, after pnpm install and a package build, the same import paths work via workspace:* linking. The package is published from packages/loaders.