demo · v138

progress(value, start, end)

Slide a custom value through a range. progress() returns proportional distance between three calculations; this demo clamps that number to 0…1, then the same scalar drives both a width and a transform.

checking support…
50
0
100

width: calc(100% * clamp(0, progress(...), 1))

transform: scale(0.5 + p * 1.5)

--val50 clamp(0, progress(--val, start, end), 1)0.5 computed bar width50% computed ball scale1.25

the code

.stage {
  --val: 50;
  --start: 0;
  --end: 100;
  --p: clamp(0, progress(var(--val), var(--start), var(--end)), 1);
}
.bar  { width: calc(100% * var(--p)); }
.ball { transform: scale(calc(0.5 + var(--p) * 1.5)); }

see also