# fun-loader: playful loading text for AI apps > Playful, rotating loading text for AI requests and other slow tasks. fun-loader is a 4.4 kB web component, ``, that shows rotating, playful loading messages with an animated icon while an AI/LLM request or other slow task runs. No dependencies. - Long waits: every theme changes its messages after 8 s and 20 s of active (unpaused) waiting, to lines that acknowledge the wait without faking progress. - When to use: open-ended waits of a few seconds or more (LLM responses, image generation, reports, payments). For waits under a second a plain spinner is enough; for known progress such as uploads, use a progress bar. - Install: `npm install @vectorchi/fun-loader`, then `import "@vectorchi/fun-loader"` once. CDN: ``. - HTML: ``. - React/Next.js: `import { FunLoader } from "@vectorchi/fun-loader/react"`, then ``. Works in React 18 and 19 and in Next.js server components. - Vue: `import { FunLoader } from "@vectorchi/fun-loader/vue"`. - Nuxt: `npx nuxi module add @vectorchi/nuxt-fun-loader`, then `` is auto-imported. `funLoader.themes` in nuxt.config bundles only the listed themes; `funLoader.defaults` sets theme, icon, interval and label app-wide. - Themes: thinking (default), dev, design, art, kitchen, finance, transfer (payments), calm. Icons: spinner (default), dots, bars, pulse, sparkle, orbit, globe, gear, none. - Options (attributes and properties): theme, icon, interval (ms, default 2400), ordered (keep written order; messages are shuffled by default), paused, icon-only (icon without text), label (screen-reader text, default "Loading"). Property/prop only: `messages` (string[], one stage, overrides theme) and `stages` ({ after: ms, messages }[]; [] or null turns staging off). - Show it while waiting and remove it when the result arrives; removing it stops its timer. ## Table of Contents ### Getting started - [fun-loader: playful loading text for AI apps](https://vectorchi.github.io/fun-loader/index.md): A 4.4 kB web component that shows playful, rotating loading messages while AI requests run, and adapts them as the wait grows. HTML, React, Next.js, Vue. - [Install fun-loader from npm or a CDN](https://vectorchi.github.io/fun-loader/installation.md): Install fun-loader from npm or load it from a CDN with one script tag, and see what each import includes and how big it is. ### Guides - [Waiting for AI responses](https://vectorchi.github.io/fun-loader/guides/ai-responses.md): Show a loader while an AI request runs and replace it with the answer, in plain JavaScript, React and Vue, including streamed responses. - [Loading messages for payment flows](https://vectorchi.github.io/fun-loader/guides/payment-flows.md): Use the calm transfer theme for money transfers, and show real progress steps without misleading users. - [Write custom loading messages and themes](https://vectorchi.github.io/fun-loader/guides/custom-messages.md): Write your own loading messages for one loader or register a reusable theme, with tips for messages that read well. ### Frameworks - [AI loading text in React and Next.js](https://vectorchi.github.io/fun-loader/frameworks/react.md): Use fun-loader in React 18 and 19 and Next.js: props, refs, server components, and TypeScript types for the plain tag. - [AI loading text component for Vue](https://vectorchi.github.io/fun-loader/frameworks/vue.md): Use fun-loader in Vue with the FunLoader component, or as a plain custom element. - [AI loading text component for Nuxt](https://vectorchi.github.io/fun-loader/frameworks/nuxt.md): Use fun-loader in Nuxt with the @vectorchi/nuxt-fun-loader module: auto-imported FunLoader, only the themes you choose, and app-wide defaults. - [Plain HTML & JavaScript](https://vectorchi.github.io/fun-loader/frameworks/html.md): Use fun-loader in plain HTML and JavaScript: attributes, properties, showing and hiding, and creating loaders on the fly. ### Customize - [Themes: 8 built-in sets of loading messages](https://vectorchi.github.io/fun-loader/customize/themes.md): All 8 built-in fun-loader themes, from thinking and dev to finance and transfer, with every message and what each suits. - [Animated loading icons: spinner, dots and more](https://vectorchi.github.io/fun-loader/customize/icons.md): The fun-loader icons (spinner, dots, bars, pulse, sparkle, orbit, globe, gear or none), with live examples and how to size and color them. - [Style the loader with CSS custom properties](https://vectorchi.github.io/fun-loader/customize/styling.md): Style fun-loader with CSS: font and color, custom properties for icon color, gap and fade, and the text and icon parts. - [Accessible loading text for screen readers](https://vectorchi.github.io/fun-loader/customize/accessibility.md): How fun-loader works with screen readers and reduced-motion settings, and how to set a helpful label. ### Reference - [All options: theme, icon, interval, stages](https://vectorchi.github.io/fun-loader/reference/options.md): Every fun-loader option (theme, icon, interval, ordered, paused, icon-only, label, messages, stages) with types, defaults and attribute behavior. - [API reference: element, themes and helpers](https://vectorchi.github.io/fun-loader/reference/api.md): The fun-loader API: element members, stages, registerTheme, getTheme, define, defineAll, the exported themes, constants and types. - [Smaller builds: load only the themes you use](https://vectorchi.github.io/fun-loader/reference/smaller-builds.md): Load only the fun-loader element and the themes you need, and register it under a different tag name. ### Other - [Playground: try every theme, icon and option](https://vectorchi.github.io/fun-loader/playground.md): Try every fun-loader theme, icon and option live, watch the messages change on a long wait, and copy the markup for your settings.