GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

CSS Progress Bar: 9 Game-Style Fill Patterns

· Godrich · 9 items · 33 min read

LoadersVanilla JSSCSSLoadingGames & playDashboard

CSS Progress Bar: One of nine narrows as its value drops while a red glow trails behind, one layers excess past its ceiling as a translucent overlay, and one

Damage-flash deplete toggle — when a value drops, the bar narrows first while a red afterglow trails behind, narrowing more slowly01 game-gauge-bar-damage-flash-deplete Regen-tick glow toggle — each time a value ticks upward at a fixed interval, a flash lights the bar's leading edge02 game-gauge-bar-regen-tick-glow Segment-pip crack toggle — the bar splits into pips, and dropping past one pip leaves a crack pattern on it03 game-gauge-bar-segment-pip-crack Overheal shield-cap toggle — when a value exceeds its ceiling, the excess appears as a translucent layer over the bar04 game-gauge-bar-overheal-shield-cap Critical-threshold pulse toggle — once a value enters a set low range, the whole bar brightens and dims on a steady rhythm05 game-gauge-bar-critical-threshold-pulse Charge-hold-release toggle — a value slowly fills while held and empties all at once on release06 game-gauge-bar-charge-hold-release Multi-lane compare toggle — two or more parallel bars fill to different values side by side07 game-gauge-bar-multi-lane-compare Stagger-break snap toggle — when a secondary value hits its ceiling, the bar shatters away all at once08 game-gauge-bar-stagger-break-snap Reduced-motion instant toggle — with reduced motion on, every animation from the prior eight bars snaps straight to its end value09 game-gauge-bar-reduced-motion-instant

Auto-plays · click a tile to jump to its section · all nine in one zip

None of the nine reaches out to a server, writes to localStorage, or calls Math.random anywhere in its script — each is a small, self-contained gauge bar built around one numeric state value and a short list of constants that decide exactly how a rise or fall in that value looks on screen. Because the scope stays this narrow, spotting which value actually moves — a health total, a value with a ceiling it can spike past, or a secondary meter that snaps instead of draining — is enough to tell which of these nine fits a given screen before any of the code gets opened.

Anatomy of nine patterns — which value changes and when

All nine run their own requestAnimationFrame loop, and none of them ever calls Math.random: item 07's four lanes move on a fixed sine wave (LANES stores each lane's own freq and phase), and the rest step through a hardcoded EVENTS, BUILD_EVENTS, or JOLTS array, so the same run plays out the same way on every visit. Six of the nine also compute a real decay or oscillation every frame rather than leaning on a CSS transition alone: item 01's trailHP eases toward the current value through an exponential LERP_RATE, item 02's edge glow and item 05's brightness pulse both fall off through Math.exp-based decay (GLOW_TAU and PERIOD_MIN/PERIOD_MAX), item 04's excess value bleeds back under the cap through DECAY_RATE, item 06's burstAt() multiplies an exponential decay by a cosine to shape the release spring's RELEASE_ZETA, and item 08's snapOpacity() spikes for SPIKE_DUR then falls linearly across DROP_DUR before a separate RECOVER_DUR ramps the bar back up. The other three settle differently: item 03's stateFor() steps a pip's crack and fill values off a fixed CRACK_DUR/STAGGER window with no ongoing decay, item 07 never actually stops moving because valuesAt() reads straight off each lane's sine wave on every single frame no matter what a visitor does, and item 09's right-hand bar skips per-frame calculation entirely, snapping straight to the target value with no in-between step at all. Every listener answers a real interaction and none comes from the autoplay script: eight of the nine — 01 through 05, 07, 08, and 09 — pair a click with a keydown for Enter or Space, and item 06 is the one outlier, wiring pointerdown, pointerup, pointerleave, and pointercancel alongside keydown and keyup so a press-and-hold gesture and its keyboard equivalent both register the same way — nine listener sets in total, and autoplay supplies none of them. All nine start in an isDemo autoplay state that feeds its own scripted array until the first click or keydown calls human(), which strips the is-demo class and stops the scripted feed for good — item 09 is the exception, since its whole point is a side-by-side contrast, so its left-hand loop keeps running under requestAnimationFrame even after a visitor takes over.

Code per pattern

01Damage-flash deplete toggle — when a value drops, the bar narrows first while a red afterglow trails behind, narrowing more slowly

The moment the value drops, the bar's width narrows first, and the leftover red width behind it shrinks more slowly to match. A combat screen's HP readout or any status bar meant to emphasize a sudden hit suits this pattern, since the red afterglow itself becomes the visual record of exactly how much was just lost.

Damage-flash deplete toggle — when a value drops, the bar narrows first while a red afterglow trails behind, narrowing more slowly
Open in a new tab

01 · Damage-flash deplete toggle — when a value drops, the bar narrows first while a red afterglow trails behind, narrowing more slowly — Measured area 2.853% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

applyHit()LERP_RATEFLASH_TAU
  function render() {
    var mp = Math.max(0, Math.min(100, mainHP));
    var tp = Math.max(0, Math.min(100, trailHP));
    fill.style.width = mp.toFixed(2) + '%';
    trailEl.style.width = tp.toFixed(2) + '%';
    track.setAttribute('aria-valuenow', String(Math.round(mp)));
    valueEl.textContent = Math.round(mp) + ' / ' + HP_MAX;
  }

  function applyHit(dmg, ts) {
    trailHP = mainHP; // the afterglow starts from the pre-hit value and catches up late
    mainHP = Math.max(0, mainHP - dmg);
    flashStart = ts;
  }

What the numbers say

Item 01 fills 2.85% of the frame cumulatively at a 97.7 average intensity while moving in 21 of 23 sampled frames, since applyHit() sets the trailing value equal to the pre-hit value the instant damage lands and every frame after that LERP_RATE eases it back down while FLASH_TAU fades the red flash — two constants doing all of the motion, with no CSS keyframe involved.

02Regen-tick glow toggle — each time a value ticks upward at a fixed interval, a flash lights the bar's leading edge

Each time the value steps up at a short interval, the brightness at the bar's leading edge spikes and then settles back down. A health or stamina readout under auto-regen, or a resource bar charging while idle, suits this pattern, since each small step becomes its own visible event instead of blending into one smooth rise.

Regen-tick glow toggle — each time a value ticks upward at a fixed interval, a flash lights the bar's leading edge
Open in a new tab

02 · Regen-tick glow toggle — each time a value ticks upward at a fixed interval, a flash lights the bar's leading edge — Measured area 5.433% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

tick()GLOW_TAUTICK_INTERVAL
  function render(glow) {
    var v = Math.max(0, Math.min(RES_MAX, value));
    fill.style.width = v.toFixed(2) + '%';
    edge.style.left = v.toFixed(2) + '%';
    var g = glow < 0.02 ? 0 : glow;
    // calc layer: the glow value drives both the brightness and bloom CSS values at once
    edge.style.opacity = (0.35 + g * 0.65).toFixed(3);
    edge.style.transform = 'translate(-50%, -50%) scale(' + (1 + g * 0.9).toFixed(3) + ')';
    track.setAttribute('aria-valuenow', String(Math.round(v)));
    valueEl.textContent = Math.round(v) + ' / ' + RES_MAX;
  }

  function tick(ts) {
    value = Math.min(RES_MAX, value + TICK_AMOUNT);
    glowStart = ts;
  }

  function human() {
    if (isDemo) { gb.classList.remove('is-demo'); isDemo = false; }
  }

What the numbers say

Item 02 fills 5.43% of the frame cumulatively at a 39.9 average intensity while moving in all 23 of 23 sampled frames — the highest frame count of the nine — because even though the value itself only rises on the fixed TICK_INTERVAL schedule, GLOW_TAU's decay keeps recalculating the leading edge's brightness and scale on every tick in between.

03Segment-pip crack toggle — the bar splits into pips, and dropping past one pip leaves a crack pattern on it

The instant the value passes below one pip, that pip's crack-amount value increases while the pips beyond it lose their fill. A boss health bar's stage segments, or a lives/charges pip display, suits this pattern, since a cracked pip stays on screen as a visible record of exactly which hit broke it.

Segment-pip crack toggle — the bar splits into pips, and dropping past one pip leaves a crack pattern on it
Open in a new tab

03 · Segment-pip crack toggle — the bar splits into pips, and dropping past one pip leaves a crack pattern on it — Measured area 1.917% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

stateFor()CRACK_DURSTAGGER
  function stateFor(pipIdx, ts) {
    var eventIndex = PIPS - 1 - pipIdx;
    if (eventIndex < 0 || eventIndex >= appliedIdx) {
      return { c1: 0, c2: 0, fill: 1 };
    }
    var t0 = eventTs[eventIndex];
    var dt = Math.max(0, ts - t0);
    var c1 = Math.min(1, dt / (CRACK_DUR * 0.45));
    var c2 = Math.min(1, Math.max(0, dt - STAGGER) / (CRACK_DUR * 0.45));
    var fill = 1 - Math.min(1, Math.max(0, dt - STAGGER) / (CRACK_DUR - STAGGER));
    return { c1: c1, c2: c2, fill: fill };
  }

What the numbers say

Item 03 fills 1.92% of the frame cumulatively at a 71.8 average intensity while moving in 14 of 23 sampled frames, because stateFor() runs the identical CRACK_DUR/STAGGER math for every pip on every frame while only the pip whose event index falls inside the current appliedIdx window actually changes, and the rest return a flat { c1: 0, c2: 0, fill: 1 } every time.

04Overheal shield-cap toggle — when a value exceeds its ceiling, the excess appears as a translucent layer over the bar

Once the value passes its ceiling, the width of the excess appears as a translucent layer stacked over the existing bar. A health readout with a shield overlay, or a resource bar that has overflowed its cap, suits this pattern, since the overflow gets its own visible layer instead of disappearing into a bar that was already full.

Overheal shield-cap toggle — when a value exceeds its ceiling, the excess appears as a translucent layer over the bar
Open in a new tab

04 · Overheal shield-cap toggle — when a value exceeds its ceiling, the excess appears as a translucent layer over the bar — Measured area 2.868% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

render()OVERHEAL_CAPDECAY_RATE
  function render() {
    var base = Math.min(value, HP_MAX);
    var excess = Math.max(0, value - HP_MAX);
    var shieldRatio = Math.min(1, excess / OVERHEAL_CAP);
    fill.style.width = base.toFixed(2) + '%';
    // calc layer: excess width = value above the cap / shield display basis — drives the translucent layer's width and opacity together
    shield.style.width = (shieldRatio * 100).toFixed(2) + '%';
    shield.style.opacity = shieldRatio < 0.02 ? '0' : (0.4 + shieldRatio * 0.5).toFixed(3);
    track.setAttribute('aria-valuenow', String(Math.round(base)));
    valueEl.textContent = Math.round(value) + ' / ' + HP_MAX;
  }

What the numbers say

Item 04 fills 2.87% of the frame cumulatively at a 99.7 average intensity while moving in 13 of 23 sampled frames, since OVERHEAL_CAP sets how far above 100 the shield layer can stretch and DECAY_RATE bleeds that excess back down on every frame until render() has nothing left above the cap to draw.

05Critical-threshold pulse toggle — once a value enters a set low range, the whole bar brightens and dims on a steady rhythm

Once the value falls below a set low boundary, the bar's brightness value starts rising and falling on a fixed rhythm. A low-health warning cue, or an alert bar for running out of time, suits this pattern, since the pulse itself becomes the warning rather than a separate banner or icon.

Critical-threshold pulse toggle — once a value enters a set low range, the whole bar brightens and dims on a steady rhythm
Open in a new tab

05 · Critical-threshold pulse toggle — once a value enters a set low range, the whole bar brightens and dims on a steady rhythm — Measured area 1.985% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

pulseFor()THRESHOLDPERIOD_MIN
  function pulseFor(v, ts) {
    if (v >= THRESHOLD) return { brightness: 1, glow: 0 };
    // calc layer: the lower the remaining value, the shorter the pulse period and the larger the amplitude (inverse) — recomputed from v every frame
    var ratio = (THRESHOLD - v) / THRESHOLD; // 0..1
    var period = PERIOD_MAX - (PERIOD_MAX - PERIOD_MIN) * ratio;
    var amp = AMP_MIN + (AMP_MAX - AMP_MIN) * ratio;
    var phase = (ts % period) / period * Math.PI * 2;
    var osc = Math.sin(phase);
    return { brightness: 1 + amp * osc, glow: Math.max(0, osc) * amp };
  }

What the numbers say

Item 05 fills 1.99% of the frame cumulatively at a 75.4 average intensity while moving in only 7 of 23 sampled frames — the fewest of the nine — because pulseFor() returns a flat { brightness: 1, glow: 0 } and does nothing at all until the value actually drops under THRESHOLD, at which point PERIOD_MIN's short cycle takes over only once the remaining value is close to zero.

06Charge-hold-release toggle — a value slowly fills while held and empties all at once on release

While held, the value fills at a set rate, and on release it drops straight to zero as a separate release flag switches on. A charged-attack fill indicator, or a charge-then-release resource bar, suits this pattern, since the release itself needs its own visible moment rather than just an instant reset.

Charge-hold-release toggle — a value slowly fills while held and empties all at once on release
Open in a new tab

06 · Charge-hold-release toggle — a value slowly fills while held and empties all at once on release — Measured area 3.328% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

burstAt()RELEASE_ZETACHARGE_RATE
  function burstAt(t) {
    // calc layer: release spring — a decaying cosine oscillation computes the position overshooting the target and settling back
    if (t < 0 || t > RELEASE_DUR) return { scale: 0, alpha: 0 };
    var x = t / RELEASE_DUR;
    var amp = Math.exp(-RELEASE_ZETA * x);
    var pos = 1 - amp * Math.cos(RELEASE_FREQ * t);
    return { scale: 1 + pos * 1.1, alpha: Math.max(0, amp * 1.15) };
  }

  function render(ts) {
    fill.style.width = value.toFixed(2) + '%';
    valueEl.textContent = Math.round(value) + '%';
    track.setAttribute('aria-valuenow', String(Math.round(value)));
    var b = burstAt(ts - releaseStart);
    burst.style.left = releaseFromPct.toFixed(2) + '%';
    burst.style.opacity = b.alpha < 0.02 ? '0' : b.alpha.toFixed(3);
    burst.style.transform = 'translate(-50%, -50%) scale(' + b.scale.toFixed(3) + ')';
  }

What the numbers say

Item 06 fills 3.33% of the frame cumulatively at a 76.6 average intensity while moving in 14 of 23 sampled frames, since CHARGE_RATE decides how many percentage points fill per millisecond of holding and, once the button is released, burstAt() uses RELEASE_ZETA and RELEASE_FREQ to compute a decaying cosine overshoot rather than reading it off any CSS @keyframes block.

07Multi-lane compare toggle — two or more parallel bars fill to different values side by side

Each parallel bar's fill-width value rises at its own separate rate, so the gap between the bars widens or narrows. A readout comparing several targets' health on one screen, or a progress-ranking comparison, suits this pattern, since the moving gap itself tells the story faster than any of the numbers alone.

Multi-lane compare toggle — two or more parallel bars fill to different values side by side
Open in a new tab

07 · Multi-lane compare toggle — two or more parallel bars fill to different values side by side — Measured area 2.979% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

valuesAt()JOLTSclassList.toggle()
  function render(t) {
    var values = valuesAt(t);
    var sorted = values.slice().sort(function (a, b) { return b - a; });
    var leaderVal = sorted[0];
    var secondVal = sorted[1];
    var leaderIdx = values.indexOf(leaderVal);

    for (var i = 0; i < rows.length; i++) {
      var v = values[i];
      rows[i].fill.style.width = v.toFixed(2) + '%';
      var isLeader = i === leaderIdx;
      rows[i].fill.classList.toggle('gb__laneFill--lead', isLeader);
      // calc layer: layers only the value gap between the leader and second place as a bright overlay, to show "by how much" the leader is ahead
      if (isLeader && leaderVal - secondVal > 0.3) {
        rows[i].lead.style.left = secondVal.toFixed(2) + '%';
        rows[i].lead.style.width = (leaderVal - secondVal).toFixed(2) + '%';
        rows[i].lead.style.opacity = '1';
      } else {
        rows[i].lead.style.opacity = '0';
      }
    }
    // calc layer: moves the crown display to the current leader's row via translateY (no DOM reordering — only the ranking is computed)
    crown.style.transform = 'translateY(' + (leaderIdx * rowStep) + 'px)';
  }

What the numbers say

Item 07 fills 2.98% of the frame cumulatively at a 127.9 average intensity — second only to item 09's 136.1 — while moving in all 23 of 23 sampled frames, because valuesAt() reads every lane's sine wave on every single frame regardless of clicks, while JOLTS only adds a fixed offset to one lane per click and classList.toggle() simply marks whichever lane is currently ahead.

08Stagger-break snap toggle — when a secondary value hits its ceiling, the bar shatters away all at once

The instant the secondary value reaches its ceiling, that bar's opacity value spikes briefly then drops to zero and disappears. A secondary bar signaling a stagger/break state, or a resource readout that vanishes at its limit, suits this pattern, since the snap itself marks a hard stop rather than a gradual drain.

Stagger-break snap toggle — when a secondary value hits its ceiling, the bar shatters away all at once
Open in a new tab

08 · Stagger-break snap toggle — when a secondary value hits its ceiling, the bar shatters away all at once — Measured area 2.878% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

snapOpacity()SPIKE_DURDROP_DUR
  function render(ts) {
    var dtPhase = ts - phaseStart;
    var opacity = 1, width = value, shake = 0;

    if (phase === 'snap') {
      opacity = snapOpacity(dtPhase);
      shake = dtPhase < SPIKE_DUR ? Math.sin(dtPhase * .9) * 4 : 0;
      width = STAGGER_MAX;
    } else if (phase === 'recover') {
      var r = Math.min(1, dtPhase / RECOVER_DUR);
      opacity = r;
      width = r * STAGGER_MAX * 0.9; // calc layer: recovery only ramps up to near the cap (90%) — the next hit fills in the rest
      value = width;
    }

    fill.style.width = Math.max(0, Math.min(100, width)).toFixed(2) + '%';
    fill.style.opacity = Math.max(0, Math.min(1, opacity)).toFixed(3);
    fill.style.transform = 'translateX(' + shake.toFixed(2) + 'px)';
    var shown = Math.round(Math.max(0, Math.min(100, width)));
    track.setAttribute('aria-valuenow', String(shown));
    valueEl.textContent = shown + '%';
  }

What the numbers say

Item 08 fills 2.88% of the frame cumulatively at an 83.1 average intensity while moving in 13 of 23 sampled frames, since SPIKE_DUR holds the bar's opacity at 1 for a brief beat once the value hits its cap, DROP_DUR is how long the linear fall to zero takes after that, and RECOVER_DUR is the separate window render() uses to ramp the bar back up to 90% once it starts rebuilding.

09Reduced-motion instant toggle — with reduced motion on, every animation from the prior eight bars snaps straight to its end value

When the reduced-motion flag is on, all eight prior bars switch straight to their target value with no in-between steps. A screen for users with the accessibility setting on, or a dashboard that wants fewer animations, suits this pattern, since it exists specifically to show what changes rather than to demonstrate a look of its own.

Reduced-motion instant toggle — with reduced motion on, every animation from the prior eight bars snaps straight to its end value
Open in a new tab

09 · Reduced-motion instant toggle — with reduced motion on, every animation from the prior eight bars snaps straight to its end value — Measured area 1.271% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

render()EVENTSmatchMedia()
  function render() {
    var v = Math.max(0, Math.min(100, value));
    var tv = Math.max(0, Math.min(100, trailValue));
    fillNormal.style.width = v.toFixed(2) + '%';
    trailNormal.style.width = tv.toFixed(2) + '%';
    valueNormalEl.textContent = Math.round(v);
    trackNormal.setAttribute('aria-valuenow', String(Math.round(v)));

    // instant side: snaps straight to the same value with no afterglow or transition — assignment, not calculation
    fillReduced.style.width = v.toFixed(2) + '%';
    valueReducedEl.textContent = Math.round(v);
    trackReduced.setAttribute('aria-valuenow', String(Math.round(v)));
  }

What the numbers say

Item 09 fills 1.27% of the frame cumulatively at a 136.1 average intensity — the highest intensity of the nine — while moving in 13 of 23 sampled frames, because only the left-hand normal bar carries LERP_RATE's exponential lag while the right-hand instant bar assigns the same value directly every frame, so the two visibly diverge only in the few frames right after an EVENTS change.

Where values fill and drain the bar — health, ceiling, secondary value basis

Item 01's applyHit() and FLASH_TAU 70ms are what separate a plain HP bar from this one: the main width snaps to the new, lower value the instant a hit lands, while the trailing red width stays at the old value and only catches up afterward through LERP_RATE's exponential ease — the gap between the two widths is the flash itself.

Item 04's OVERHEAL_CAP 50 and DECAY_RATE .00065 decide how far past 100 the value is allowed to sit and how fast it bleeds back down: render() turns any amount above HP_MAX into a translucent shield layer whose width and opacity both track excess / OVERHEAL_CAP, so the shield thins out on its own even without another hit landing.

Item 08's SPIKE_DUR 130ms, DROP_DUR 330ms, and RECOVER_DUR 950ms are the one set of constants in the nine that reshapes the bar's state rather than just its fill: once the secondary stagger value reaches STAGGER_MAX, snapOpacity() holds full opacity for SPIKE_DUR, drops linearly to zero across DROP_DUR, and only then does a separate RECOVER_DUR window let the bar climb back to 90% width, one hit short of breaking it again.

Looking past this single post, 9 CSS Progress Bar Circle Gauges, Copy-Paste Ready works a different axis — nine ways to style the same web progress bar (linear fill, striped, conic ring, half gauge, segmented steps) rather than nine ways a game-state event changes what a bar means. 9 SVG Progress Ring Widgets, Math Included keeps a stat-tracking purpose close to this post's own, but swaps the horizontal bar for a circular stat ring driven by stroke-dashoffset math instead of width. 9 Loading Screen Designs — Pretty CSS Loaders drops the value-driven fill entirely and treats the whole screen as a loading composition, closer to a mood than a measurement. Weighing these three against the nine css progress bar examples above is the quickest way to find which single constant is actually carrying a given build, and 273ynvg7 is what unlocks the zip sitting just below.

Where it breaks — rapid hits, large value jumps, reduced motion

None of the nine reads a value from outside itself — every change comes from the demo's own click, pointer, or keyboard handler, which is what keeps a css progress bar animation this deterministic to test even though the motion underneath is a hand-tuned physics model.

Clicking through the stagger snap

Item 08's poiseBtn click handler only does something while phase equals 'build' — its own comment notes that a click during 'snap' is ignored outright, and only once phase reaches 'recover' does a click reset the gauge back to zero and to 'build'. A visitor mashing the button right as the bar shatters gets nothing back for roughly SPIKE_DUR plus DROP_DUR, about 460ms, no matter how many times they click in that window.

A drag that leaves the charge button

Item 06 wires pointerleave and pointercancel to the exact same releaseCharge() call as pointerup, so a visitor who presses down, drags the pointer off the button, and lets go outside it still triggers a release — at whatever percentage CHARGE_RATE had reached the instant the pointer left, not the value they might expect from letting go cleanly.

Reduced motion

Items 01 through 08 each check matchMedia('(prefers-reduced-motion: reduce)') once at load and, if it matches, draw a single static frame and never start their requestAnimationFrame loop at all — the gauge shows its starting value and simply stops there. Item 09 is the deliberate exception: its own comment explains that the normal-side loop keeps running under requestAnimationFrame regardless of the system setting, because the item's whole purpose is to let a visitor compare the normal and reduced builds side by side rather than lose one of them to their own OS preference.

Three variants and accessibility

Charge-release spring, slower decay (RELEASE_ZETA 3.6 to 1.8) — lowering the damping constant from 3.6 to 1.8 makes the bar overshoot its resting point on release and bounce a few extra times before settling.

Damage afterglow, slower decay (FLASH_TAU 70 to 220) — stretching the decay-time value from 70 to 220 keeps the red afterglow bar lingering far longer before it fades away.

Stagger recharge, faster recovery (RECOVER_DUR 950 to 300) — cutting the recharge-time value from 950 to 300 makes the bar start refilling almost immediately after it shatters away.

Variant What changes What it doesn't touch
Charge-release spring, slower decay (RELEASE_ZETA 3.6→1.8) Item 06's release-burst overshoot count only CHARGE_RATE, RELEASE_DUR, RELEASE_FREQ
Damage afterglow, slower decay (FLASH_TAU 70→220) Item 01's trailing red bar's fade time only LERP_RATE, HIT_LIST, CYCLE
Stagger recharge, faster recovery (RECOVER_DUR 950→300) Item 08's post-break refill speed only SPIKE_DUR, DROP_DUR, BUILD_EVENTS

Eight of the nine — every one but item 07 — wrap their track in role="progressbar" with aria-valuemin, aria-valuemax, and an aria-valuenow that render() updates every frame, plus an aria-label naming what the value represents (HP, MP, Boss HP, Charge, Stagger, and item 09's paired HP Normal/HP Reduced Motion labels). Item 07 is the one exception: its four lanes carry no role or aria-valuenow at all, so a screen-reader visitor gets no readout of which lane is ahead beyond the crown's visual position — a real integration comparing several targets at once would need to add that itself. None of the nine sets a disabled attribute anywhere, and each button answers both a pointer/click event and its keyboard equivalent, so tab order never shifts with whatever phase a gauge happens to be in.

FAQ

Why does a css progress bar need nine different fill patterns instead of one generic bar?

Because the value driving a bar rarely means the same thing twice: a plain percentage, a value with a hard ceiling it can spike past, and a secondary meter that snaps instead of draining all call for a different transform. Naming the value first — health, overheal, or stagger — is what tells you which of these nine actually fits, before a single line of it gets copied.

Does item 06's charge-release burst come from a CSS @keyframes animation, or is it computed by hand?

It's computed, not keyframed. Every frame after the button releases, burstAt() multiplies an exponential decay term, Math.exp(-RELEASE_ZETA * x), by a cosine wave running at RELEASE_FREQ, so the overshoot-and-settle bounce comes straight from that formula rather than any @keyframes rule.

Does this set include a "css progress bar circle" style ring, or are all nine horizontal bars?

All nine here are horizontal — every one drives a width or opacity value, never a stroke-dasharray circle. 9 CSS Progress Bar Circle Gauges, Copy-Paste Ready, linked above, is the collection built around that circular shape instead.

Sources: MDN — Using CSS transitions · MDN — Window: requestAnimationFrame() method · MDN — prefers-reduced-motion · MDN — ARIA progressbar role

Enter the archive password

The password is inside this article. You will find it as you read.