Progress and meter

Value changes of a native <progress> or <meter> run like ink, with a wet front that dries before it stops. The value, the role and what assistive technology announces stay native.

Live example

Upload

30%

Usage

<label for="upload">Upload</label>
<div class="fx-bar"><progress id="upload" max="100" value="0">0%</progress></div>

import { createRenderer, createProgressFx } from 'webgl-ui'
import 'webgl-ui/src/elements/progress/progress.css' // the CSS contract

const renderer = createRenderer()
const bar = document.querySelector<HTMLProgressElement>('#upload')!
createProgressFx(bar, { renderer })

bar.value = 60 // animated: the library watches value, max and min

.fx-bar {
  --fx-track: rgb(0 0 0 / 0.1);  /* the stage background */
  --fx-fill: #1b1815;            /* the fill, for the native bar and the effect */
  --fx-bar-height: 0.625rem;
}

Options

Option	Type	Default	Description
`renderer`	`Renderer \| () => Renderer`	required	The shared renderer.
`effect`	`EffectDef`	`inkBarEffect`	A bar effect: it receives `uValue` (from, to) and `uRtl` through `params`.
`duration`	`number`	`700`	Duration of a change across the whole bar; shorter changes take less (at least 160 ms).
`stage`	`HTMLElement`	the parent	The box the canvas covers: `.fx-bar`.

Returns

Member	Description
`destroy()`	Stops watching the element and settles a running animation.
`debug()`	`{{ value, shown, running }}`, fractions of the bar.

CSS contract

progress.css styles the native bar flat with the stage's two colors, so the last frame of the effect and the native bar are the same picture (an e2e test compares them pixel by pixel). While animating, the stage has [data-animating] and --p, and the native bar is transparent; in every other case it shows.

Behavior and accessibility

The new value is native at once; only the paint follows. Rapid updates chain from where the bar is drawn.
Indeterminate progress (no value) stays native, with the browser's own animation.
Right-to-left bars fill from the right. meter uses min, max and value; its low / high / optimum states keep their native meaning, but the contract paints a single fill color.
Forced colors: the system draws the bar (appearance: auto) and the effect stays off, like with reduced motion, more contrast, reduced transparency or no WebGL2.