Skip to content
Pinky UI

motion

Liquid Loader

A small accessible loading/progress indicator.

  • motion

Live preview

Quick usage

usage
import { LiquidLoader } from "@pinky-ui/effects";

<LiquidLoader />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

LiquidLoader is a small loading or progress indicator using dots, a soft blob or a liquid pill. It communicates waiting without turning the loading state into a visual event.

Use it beside a short status label or inside a button whose action is genuinely pending. Prefer the pill variant when progress is known. Do not use a loader to disguise slow navigation or leave it spinning after work completes.

The component exposes role=status, an accessible label and aria-busy. Reduced motion leaves a static indicator; the status text remains available. Keep dimensions stable so the loading state does not move surrounding controls.

Open this skill on its own page