Introduction

fun-loader shows playful, rotating loading text while an AI request or another slow task is running. Instead of a bare spinner, people see "Opening a few mental tabs…". And when the wait drags on, the messages move on too, to lines that admit the wait instead of looping the same jokes.

thinking

art · sparkle

dev · dots

finance · bars

transfer · pulse

kitchen

<fun-loader theme="thinking"></fun-loader>

Why fun-loader

• One tag, any stack. <fun-loader> is a standard web component. It works in plain HTML, React, Next.js, Vue, Nuxt and anything else that renders HTML.
• Wait-aware. After 8 and 20 seconds, the messages change to ones that acknowledge the longer wait, without faking progress. See long waits.
• Small. 4.4 kB minified and compressed, with every theme included, and no dependencies.
• Ready-made themes. 8 themes for different products, from AI chat to payments, plus 8 animated icons.
• Your words when you need them. Pass your own messages, or register a theme your whole app can use.
• Accessible by default. Screen readers hear one short label instead of every rotating message, and it respects reduced-motion settings.

When to use it

Use fun-loader when the wait is open-ended and usually takes a few seconds or more, such as an LLM response, image generation, a report or a payment.

• Under a second: a plain spinner is enough.
• Known progress, such as a file upload: use a progress bar. If your task has real steps, you can also set your own messages and change them as each step happens.

Pick a theme that matches the task: thinking (default) for chat, dev for code, design, art for images, finance for reports, transfer for payments, kitchen or calm.

Next steps

• Install it from npm or a CDN.
• See the most common use: waiting for AI responses.
• Browse the themes and icons, or try everything in the playground.