Build: A Loading Bar That Keeps Time

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

tween

Short for "in-between": a function that moves a number from one value to another over a duration, calling you back on each frame.

easing function

A function that turns progress into shaped progress, such as fast at first and slow at the end. Phase 5 covers it.

cancel

Stop a running animation so it makes no further frames and calls nothing.

role="progressbar"

Tells assistive technology that an element shows how far something has got.

1. 1

   Watch the bar at the slow stage

   In "The launch page with its loading bar" press Replay, then slow the page to 0.1×. The 1.5-second wait takes 15 seconds, and the 300 ms finish takes 3. The bar is not a CSS animation, so the timeline shows no track for it. Its frames still appear in the frame strip.

2. 2

   Make the load arrive sooner

   Change setTimeout(resolve, 1500) to setTimeout(resolve, 300) and replay. The creep is cancelled early, and the finish starts from wherever the bar had got. Because from is shown, the finish never jumps backward.

3. 3

   Change the easing and read the end

   In "Tween edges" change easeOutCubic to (t) => t * 2. The last line now prints ended exactly on 200. The tween always ends on from + (to - from) * easing(1), so an easing must return 1 at progress 1 if the end is to be the to you asked for.

Your lumen-motion project after this topic. Click a file to see it in full.

// loop.js: time-based animation helpers (Phase 1). Phase 8 adds more to this file.

export const linear = (t) => t;
export const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);

/**
 * tween: moves a number from `from` to `to` over `duration` ms and calls onUpdate(value) on every frame.
 * It reads the clock instead of counting frames, so it lasts the same time at 30, 60 and 120 Hz, and after
 * a hidden tab it is finished. Returns { cancel() }.
 */
export function tween({ from, to, duration, easing = linear, onUpdate, onDone }) {
  let start;
  let id = 0;
  let live = true;
  function frame(now) {
    if (!live) return;
    start ??= now; // the first frame is progress 0
    const progress = duration > 0 ? Math.min((now - start) / duration, 1) : 1; // a zero duration finishes at once
    onUpdate(from + (to - from) * easing(progress));
    if (progress < 1) id = requestAnimationFrame(frame);
    else { live = false; onDone?.(); }
  }
  id = requestAnimationFrame(frame);
  return { cancel() { live = false; cancelAnimationFrame(id); } };
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: the story chapter. Lena tested the first draft of the loading bar, which counted frames. It ended in one second on her 60 Hz test laptop, in half a second on her 120 Hz iPhone, and in two seconds in power-saving mode. The designers had agreed one timing. After this topic the bar lasts what it should, on every screen.

2. 2

   What it adds. src/js/motion/loop.js exports tween({ from, to, duration, easing, onUpdate, onDone }), which returns { cancel() }, plus two easing functions. main.js uses it for a bar in the hero. While the page loads, the bar creeps toward 85% (we cannot know how long the load takes), then, when the load event fires, it cancels the creep and finishes from wherever it is in 300 ms. Then the label says "The Volt is ready" and the bar goes away.

3. 3

   How it plugs in. The bar is new HTML inside the hero (#volt-loading) and a few lines of CSS, in blocks marked Phase 1. It moves with transform: scaleX(...) on the fill, so the browser only composites it (Topic 1.4). The bar is a role="progressbar" and its aria-valuenow is updated every 10%, not on every frame, so a screen reader is not flooded. Phase 0's code is otherwise unchanged.

4. 4

   Why the tween does not clamp the time step. A tween's value depends only on elapsed time. After a hidden tab the first frame has a large elapsed, progress becomes 1 and the bar finishes (Topic 1.3). The clamp is for step-by-step loops, which Phase 9 uses for springs.

5. 5

   What the launch site can do now that it could not before: show honest loading progress that is the same length on every screen, and a reusable tween for any later number-to-number animation (a counter, a scroll position, a progress ring). What is still missing: feedback on buttons (Phase 3), the toast (Phase 4), easing choices (Phase 5), the performance check of what we animate (Phase 6) and the reduced-motion switch (Phase 7). The bar is information, so it keeps moving under reduced motion; Phase 7 reviews that choice.

• Your project has loop.js and the Phase 1 blocks in three other files

• The launch page shows a loading bar that finishes when the page loads

• You can say why the bar lasts the same time at 30, 60 and 120 Hz

• You can say what the bar does with a zero duration, a cancel and a hidden tab