FeedbackNew
Glass Progress
A glass track with a fill that slides to its value, or sweeps when the length is unknown.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-progressPreview
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-progressWhat this installs5 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-progress itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-progress.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-progress.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassProgress } from "@/components/glassyui/glass-progress";
export function UploadDemo() {
return <GlassProgress label="Uploading" showValue value={62} />;
}Examples
<GlassProgress aria-label="Working" value={null} /><GlassProgress size="sm" value={30} aria-label="Small" />
<GlassProgress size="lg" value={70} aria-label="Large" />API
GlassProgressA progressbar with a glass track and fill.
valueHow far along. Leave it out, or pass null, when the length is unknown.
maxThe value that means done. Defaults to 100.
labelText above the bar. It also names the bar.
showValueShows the percentage beside the label.
sizesm, md (default) or lg.
Notes
Motion
The fill slides with a soft ease. A bar of unknown length sweeps at 30 frames a second, which spares the GPU. Reduced motion jumps to the value and holds a short fill in the middle instead of sweeping.
Accessibility
The track is a progressbar with aria-valuenow, or none when the length is unknown. Give it a label or aria-label.
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.