Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Animated Icon Spinner Input Group for Vue

A disabled data field with a spinning loader at the start and Please wait... at the end while it refreshes.

UI library: Ark UI

The input is disabled, and the placeholder says Refreshing data.... A loader spins at the start. Please wait... sits at the end. Nothing in the demo turns the spin off.

Use it while a value is refreshing and the field should not be edited. If the wait belongs to the page, put a Spinner next to the content. In Vue, Ark UI does not stop the spin when the data arrives.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background" data-disabled="true">
  <InputGroupInput
    aria-label="Data"
    :disabled="true"
    placeholder="Refreshing data..."
    type="text"
  />
  <InputGroupAddon>
    <LoaderIcon aria-hidden="true" class="animate-spin" />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupText class="text-muted-foreground">Please wait...</InputGroupText>
  </InputGroupAddon>
</InputGroup>

FAQ

What makes the icon spin?

animate-spin on the LoaderIcon. For a ready-made one, use the Spinner component, as in Loading States.

How is the field disabled?

disabled on InputGroupInput blocks typing. data-disabled="true" on InputGroup dims the addons.

What is Please wait...?

An InputGroupText with text-muted-foreground in an inline-end addon.

Why is the loader at the start?

Its addon keeps the default inline-start align. Both addons are written after the input.

Is the loading announced?

The loader is aria-hidden. To announce the wait, put Please wait... in a polite live region or set aria-busy on the region being refreshed.

Does the spin respect reduced motion?

Add motion-reduce:animate-none to the icon if you want it still for people who ask for less motion.

API Reference

Input Group

Sets data-disabled, aria-label="Data", disabled, placeholder="Refreshing data...", type="text" and align="inline-end". The rest is on the Input Group page.

All 39 input group examples