Progress

Summary

Two components: the progress tracker (multi-step wizard breadcrumbs) and the progress indicator (determinate or indeterminate bar). The indeterminate animation freezes under prefers-reduced-motion, and forced-colors mode keeps the bars visible via borders.

Examples

Tracker

The tracker is a fixed table: give the <ol> a width and the steps share it equally (no per-step width juggling needed).

Details
Configure
Review
Done

Tracker with links

Visited steps are links (the tracker doubles as navigation back through the process); the current and future steps stay plain text:

Details
Configure
Review
Done

Tracker - inverted

Add neura-progress-tracker-inverted when the tracker sits on a white surface: the cut-out halos around the dots switch to white (the default halos match the gray page canvas).

Details
Configure
Review
Done

Indicator - determinate

Indicator - indeterminate

Interactive - Neura.progress

Drive the indicator with the JS API (this demo runs exactly the snippet from the JavaScript section):

HTML

<!-- width on the ol spreads the steps equally (fixed table layout) -->
<ol class="neura-progress-tracker" style="width: 100%">
  <li class="neura-progress-tracker-step"><a href="/step/1">Details</a></li>   <!-- visited: link -->
  <li class="neura-progress-tracker-step neura-progress-tracker-step-current"><span>Configure</span></li>
  <li class="neura-progress-tracker-step"><span>Review</span></li>           <!-- future: plain -->
  <li class="neura-progress-tracker-step"><span>Done</span></li>
</ol>

<div class="neura-progress-indicator" data-value="0.6">
  <span class="neura-progress-indicator-value" style="width: 60%"></span>
</div>

CSS classes

Class	Effect
`.neura-progress-tracker`	The step list (`<ol>`). Fixed table layout: set a width and steps share it equally.
`.neura-progress-tracker-step`	One step (`<li>`). Content is an `<a>` for visited steps, a `<span>` otherwise.
`.neura-progress-tracker-step-current`	The current step; everything after it dims.
`.neura-progress-tracker-inverted`	White dot halos / connector gaps for trackers on white surfaces.
`.neura-progress-indicator`	The bar container; `data-value` switches determinate styling.
`.neura-progress-indicator-value`	The fill span (width = progress).
`.neura-progress-indicator-static`	Modifier: disables the width transition for instant updates.

JavaScript

The tracker is CSS-only. The indicator has a native driver; no JS is needed for static markup (a server-rendered data-value + inline width renders as-is), but dynamic updates go through Neura.progress:

API

Member	Description
`Neura.progress(elOrSelector)`	Get the singleton instance for a `.neura-progress-indicator` (adds `role="progressbar"` + range ARIA).
`.update(value)`	Set determinate progress: `0..1` (clamped). Sets the fill width, `data-value`, and `aria-valuenow` in one call.
`.setIndeterminate()`	Back to the endless animated bar (removes `data-value` / `aria-valuenow`).
`.value()`	Current value, or `null` when indeterminate.

const bar = Neura.progress('#demo-progress');

// Advance in steps, wrapping back to zero past 100%:
document.getElementById('demo-progress-advance').addEventListener('click', () => {
  const next = bar.value() === null || bar.value() >= 1 ? 0 : bar.value() + 0.2;
  bar.update(next);         // sets width, data-value, and aria-valuenow together
});

// Switch between the animated bar and the last determinate value:
document.getElementById('demo-progress-toggle').addEventListener('click', () => {
  if (bar.value() === null) bar.update(0.6);
  else bar.setIndeterminate();
});

AUI compatibility

aui-progress-tracker* / aui-progress-indicator* aliases; steps become links only for visited steps, matching AUI. AJS.progressBars.update() / setIndeterminate() are compat aliases over Neura.progress; update now drives the fill width too, so the manual width line older code needed is no longer required.