Menu

Component · controls

Liquid glass progress

Completion or level.

A glass panel holding two determinate progress tracks and an indeterminate one, over zoomed desert ridges.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
track: flat glass groove · fill: solid accent (or tinted liquid)
Profile
flat
Bezel (px)
0
Displacement (px)
0
Blur (px)
0

Geometry. track 6–8 tall, radius h/2; label left + value right above

Rules1
  • Thin tracks carry no refraction; do not fake it with gradients.
Anatomy3
  • label/value row
  • groove
  • fill
States2
  • determinate
  • indeterminate (moving highlight)

Questions

What material is a liquid glass progress?

Track: flat glass groove · fill: solid accent (or tinted liquid) material with a flat edge profile, in the controls layer. Completion or level.

How big is a liquid glass progress?

Track 6–8 tall, radius h/2; label left + value right above.

What bezel, displacement and blur does it use?

Bezel 0; displacement 0; blur 0 (px).

Which states does a liquid glass progress need?

Determinate; indeterminate (moving highlight).