FeedbackNew
Glass Spinner
A ring with a fading tail, for waiting on something short.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-spinnerPreview
Demos ready. Update 0.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-spinnerWhat this installs5 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-spinner itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-spinner.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
clsx
Installed files
components/glassyui/glass-spinner.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassSpinner } from "@/components/glassyui/glass-spinner";
export function SavingDemo() {
return <GlassSpinner label="Saving" />;
}Examples
<GlassButton disabled>
<GlassSpinner size="sm" label="Saving" />
Saving…
</GlassButton>API
GlassSpinnerA status element with a rotating ring.
labelRead out by screen readers. Defaults to Loading.
sizesm, md (default) or lg.
Notes
Colour
The ring takes its colour from the surrounding text, so it suits any button or surface.
Reduced motion
The ring stops turning. Its label still tells assistive technology that work is under way.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.