Skip to content
ui.anuragroy.dev

Browse components

← All components

Agent Loading

Shimmer, cycling phrases, progress, and pixel-grid waits.

Install
npx shadcn@latest add https://ui.anuragroy.dev/r/agent-loading.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/agent-loading.json

GitHub fallback if the website is down:

Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/agent-loading.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/agent-loading.

Import
import { AgentLoading } from "@/components/ui/agent-loading"
example.tsx
import { AgentLoading } from "@/components/ui/agent-loading"export function Example() {  return (    <>      <AgentLoading variant="shimmer">Generating response…</AgentLoading>      <AgentLoading        variant="phrases"        phrases={["Reading…", "Comparing…", "Drafting…"]}      />      <AgentLoading variant="progress" value={62} elapsed="4.2s">        Indexing files      </AgentLoading>    </>  )}

API Reference

AgentLoading

PropTypeDefault
variant"shimmer" | "phrases" | "progress" | "grid""shimmer"
phrasesstring[]—
valuenumber—
elapsedstring—
  • value — Used by the `progress` variant.

Notes

  • The shimmer variant adds a `shimmer` CSS utility via the registry item.
  • Also exports `AgentLoadingText`, `AgentLoadingElapsed`, and `AgentLoadingGrid` for custom layouts.