Live values
A value that changes on its own, every two seconds. Not a clock: the API has no wall-clock time.
Watch. Nothing to click.
| name | value | previous | changes |
|---|---|---|---|
| Waiting for the preview to start. | |||
- Interact with the preview to record events.
How it works
- live()line 3Re-evaluates an expression on an interval.
- random()line 3A random value between min and max. The browser’s native random() handles the calls it supports; Reactive CSS runs the rest, and rolls a new value at each event inside a mutation.
live(expression, interval) evaluates its expression again at a fixed interval. With random() inside, the meter gets a new level every two seconds.
Native CSS alternative
CSS animations can change values over time, but along a fixed timeline, not to a new random value. A wall clock is not possible in either: live() repeats an expression, and no Reactive CSS function returns the time of day. That is why this example is “Live values” and not a clock.
Limitations
- The timer runs while the element exists and the tab is visible. In a hidden tab it pauses, and missed ticks are skipped, not replayed.
- When the element is removed, its timer subscription ends, and the last subscriber of an interval stops the timer (tested).
Implementation
2 files · 5 lines/* ---- Reactive CSS -------------------------------------------------------------------------- *//* live() evaluates its expression again on a shared timer; random() inside it re-rolls each time. */.live { --level: live(random(0, 100, by 1), 2s); }.live .bar { scale: calc(var(--level) / 100) 1; } /* a transform: no layout work */.live .level::after { counter-reset: level var(--level); content: counter(level); }Source: the library's examples/api/live-values/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.
State history
A score that remembers its last value and which way it moved.