Loader

The Loader component provides a spinning animation to indicate loading states in your AI applications. It includes both a customizable wrapper component and the underlying icon for flexible usage.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/loader.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/loader

Usage

Usage with AI SDK

Build a simple chat app that displays a loader before the response streams by using status === "submitted".

Add the following component to your frontend:

+page.svelte

Add the following route to your backend:

api/chat/+server.ts

Props

Loader

Prop	Type	Default	Description
`size`	`number`	`16`	Size of the loader icon in pixels
`class`	`string`	-	Additional CSS classes to apply to the loader container
`...restProps`	`HTMLAttributes<HTMLDivElement>`	-	All other div props are supported

LoaderIcon

Prop	Type	Default	Description
`size`	`number`	`16`	Size of the loader icon in pixels