Classic

import { Classic } from "@/components/loading-ui/classic";

export function ClassicDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/classic
Copy

Usage

Copyimport { Classic } from "@/components/loading-ui/classic";

Copy<Classic />

Customization

Classic is the most familiar loading treatment in the set. It works especially well when you want a spinner that feels native to buttons, inputs, dialogs, and form-heavy UI without drawing too much attention to itself.

Size

Adjust the overall footprint with size-* utilities depending on whether the spinner is sitting inline with text or acting as the main indicator in a small panel.

import { Classic } from "@/components/loading-ui/classic";

export function ClassicSize() {

Color

The spinner uses currentColor, so direct text color utilities or inherited color from a parent are enough to restyle it.

import { Classic } from "@/components/loading-ui/classic";

export function ClassicColor() {

Examples

These examples focus on the patterns where Classic tends to feel most natural: compact controls, inline validation, and background activity states that should stay readable but unobtrusive.

Button

Use Classic in action buttons when you want a familiar loading cue that blends into the control instead of dominating it.

import { Button } from "@/components/ui/button";
import { Classic } from "@/components/loading-ui/classic";

Input Group

In input groups, Classic works well for field-level checks and message drafting states that stay close to the control they affect.

import {
  InputGroup,
  InputGroupAddon,