Avenra
Liquid GlassAPI Reference
Liquid GlassAPI Reference

createLiquidProgress

Glass-styled progress bar with spring-animated fill.

createLiquidProgress

Creates a glass-styled progress bar.

Basic Usage

import { createLiquidProgress } from '@avenra/liquid-glass';

const progress = createLiquidProgress('#progress-container', {
  value: 0,
  max: 100
});

// Update progress
progress.value = 75;

Props / Options

Extends LiquidGlassOptions plus:

PropTypeDefaultDescription
valuenumber0Initial progress value
minnumber0Minimum value
maxnumber100Maximum value

Return Value — LiquidProgressHandle

MemberTypeDescription
elementElementThe progress container element
valuenumber (get/set)Current progress value
destroy()() => voidClean up the component
on('change', cb){ value: number, element: Element }Fired when value changes
on('destroy', cb)undefinedFired on destruction

On this page