Square morph loaderPro

The kit's stop square morphing to a bar and a pill and back, with `clip-path: inset(round)` and a quarter turn. CSS only.

Markdown

On this page

ProThe stop square morphing to a bar and a pill and back, large and beside a label.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/square-morph-loader

Usage

tsx

import { SquareMorphLoader } from "@/components/ui/chatcn/pro/square-morph-loader"

<SquareMorphLoader size="sm" label="" />

The rounded square is the kit's mark for "the model is producing": the streaming caret and the stop button share it. Use this loader where the wait belongs to the model.

Examples

Sizes and states

ProSizes, tones, slow and fast, paused and the reduced motion frame.

Pending timing

As a pending state, a loader never shows in the first 300 ms, and once shown it stays at least 400 ms so it never flashes. useDelayedPresence from the free thinking-indicator does both.

Props

Prop	Type	Notes
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	12, 16, 24, 40 or 72 px, or any side length
`speed`	`number`	Loop speed multiplier. Default 1
`paused`	`boolean`	Freezes the loop
`still`	`boolean`	Draws the reduced motion frame
`label`	`string`	Accessible name. Default "Loading"; empty hides it

Motion

Square, wide bar, tall pill, square, over 2.4 s. Every stop is the same inset() shape, so the browser interpolates instead of jumping, and each shape holds briefly so the eye reads three silhouettes, not a wobble.
Under reduced motion the movement stops on one still frame and the whole loader breathes in opacity, 1 to 0.55 over 1.4 s. still draws that frame on demand; paused freezes the loop where it is.
Animates only transform, opacity and clip-path. No JavaScript runs per frame.

Accessibility

The loader is role="img" named by label, "Loading" by default. Next to a visible label, pass label="" and it hides from assistive tech.
Announce the outcome, not the wait: put a polite live region on the result instead of on the loader.
Under forced-colors the shapes draw in CanvasText.