diff --git a/.changeset/progress-linear.md b/.changeset/progress-linear.md
new file mode 100644
index 000000000..81f7a5181
--- /dev/null
+++ b/.changeset/progress-linear.md
@@ -0,0 +1,5 @@
+---
+"webpack-dev-middleware": minor
+---
+
+`progress` now takes `"circular"` and `"linear"` as well as a boolean, the same values as webpack-dev-server's `client.progress`. `"circular"` is the badge this package has always shown, and what `true` still selects; `"linear"` renders a thin bar across the top of the viewport
diff --git a/client-src/index.js b/client-src/index.js
index 876af591e..e492fe445 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -46,7 +46,7 @@ import stripAnsi from "./utils/strip-ansi.js";
  * @property {string} name limit updates to this compilation name
  * @property {boolean} autoConnect connect immediately when the entry runs
  * @property {number=} reconnect how many times to reconnect before giving up, unset to use the transport's default
- * @property {boolean} progress show a small badge while a rebuild is in progress
+ * @property {boolean | "circular" | "linear"} progress show an indicator while a rebuild is in progress — `true` and `"circular"` a small badge, `"linear"` a thin bar across the top of the viewport
  */
 
 /** @type {ClientOptions} */
@@ -187,7 +187,12 @@ function setOverrides(overrides) {
   }
 
   if (overrides.progress) {
-    options.progress = overrides.progress !== "false";
+    // Same values as webpack-dev-server's `client.progress`, so the shape it
+    // puts in this query needs no translating.
+    options.progress =
+      overrides.progress === "linear" || overrides.progress === "circular"
+        ? overrides.progress
+        : overrides.progress !== "false";
   }
 
   if (overrides.dynamicPublicPath && overrides.dynamicPublicPath !== "false") {
@@ -594,6 +599,9 @@ if (typeof window !== "undefined") {
   }
   reporter = window[REPORTER_KEY];
 
+  // `true` keeps the badge this package has always shown.
+  indicator.configure(options.progress === "linear" ? "linear" : "circular");
+
   // Only what the transport in use needs has to exist: asking for a WebSocket
   // on a browser without `EventSource` is fine, and so is the reverse. An
   // injected client speaks for itself, so nothing is required of the browser
diff --git a/client-src/indicator.js b/client-src/indicator.js
index 72e28b3e7..6c942514f 100644
--- a/client-src/indicator.js
+++ b/client-src/indicator.js
@@ -12,13 +12,23 @@ const RING_LENGTH = 2 * Math.PI * 6;
 // eslint-disable-next-line jsdoc/reject-any-type
 /** @typedef {any} EXPECTED_ANY */
 
+/**
+ * @typedef {"circular" | "linear"} IndicatorType
+ */
+
 /**
  * @typedef {object} IndicatorState
  * @property {HTMLElement | null} host badge host element
+ * @property {IndicatorType} type which indicator is rendered
  * @property {HTMLElement | null} label label inside the badge
  * @property {HTMLElement | null} dot pulsing dot (indeterminate mode)
  * @property {SVGSVGElement | null} ring progress ring (determinate mode)
  * @property {SVGCircleElement | null} ringValue ring value circle
+ * @property {HTMLElement | null} bar filled part of the linear indicator
+ * @property {EXPECTED_ANY} barAnimation the bar's sweep, when one is running
+ * @property {EXPECTED_ANY[]} animations every running animation, so motion can be stopped on request
+ * @property {EXPECTED_ANY} motionListener what watches for motion being declined mid-build
+ * @property {EXPECTED_ANY} motionMediaQuery the query that listener sits on, which is the only object it can be removed from
  * @property {Record<string, true>} building sources with a build in progress — the badge hides only when every source finished
  */
 
@@ -26,10 +36,16 @@ const RING_LENGTH = 2 * Math.PI * 6;
 function createIndicatorState() {
   return {
     host: null,
+    type: "circular",
     label: null,
     dot: null,
     ring: null,
     ringValue: null,
+    bar: null,
+    barAnimation: null,
+    animations: [],
+    motionListener: null,
+    motionMediaQuery: null,
     building: {},
   };
 }
@@ -66,6 +82,105 @@ const state = (() => {
   return holder[INDICATOR_STATE_KEY];
 })();
 
+/**
+ * @returns {EXPECTED_ANY} the reduced-motion query, or null where there is none
+ */
+function motionQuery() {
+  /* istanbul ignore next -- @preserve */
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return null;
+  }
+
+  return window.matchMedia("(prefers-reduced-motion: reduce)");
+}
+
+/**
+ * Stop every animation this module started, and stop listening for the
+ * preference that would have stopped them.
+ */
+function stopAnimations() {
+  for (const animation of state.animations) {
+    animation.cancel();
+  }
+
+  state.animations = [];
+
+  // The query the listener was registered on, not a fresh one: `matchMedia`
+  // returns a new `MediaQueryList` for every call, so removing from another
+  // object silently does nothing and the listeners pile up one per build.
+  const query = state.motionMediaQuery;
+
+  if (query && state.motionListener) {
+    if (typeof query.removeEventListener === "function") {
+      query.removeEventListener("change", state.motionListener);
+    } else if (typeof query.removeListener === "function") {
+      query.removeListener(state.motionListener);
+    }
+  }
+
+  state.motionListener = null;
+  state.motionMediaQuery = null;
+}
+
+/**
+ * Stop the motion, and leave what was moving in a state that still reads as a
+ * build in progress — a sweep cancelled where it happens to be would otherwise
+ * look like progress that stalled.
+ */
+function declineMotion() {
+  const wasSweeping = Boolean(state.barAnimation);
+
+  stopAnimations();
+  state.barAnimation = null;
+
+  if (wasSweeping && state.bar) {
+    state.bar.style.width = "100%";
+  }
+}
+
+/**
+ * Start a looping animation, unless the viewer asked not to see motion — and
+ * stop it if they ask while it is running. Every animation started this way is
+ * tracked, so `hide` can stop them and drop the listener with them.
+ * @param {EXPECTED_ANY} element what to animate
+ * @param {EXPECTED_ANY} keyframes keyframes
+ * @param {EXPECTED_ANY} options animation options
+ * @returns {EXPECTED_ANY} the animation, or null when none was started
+ */
+function animate(element, keyframes, options) {
+  const query = motionQuery();
+
+  if ((query && query.matches) || typeof element.animate !== "function") {
+    return null;
+  }
+
+  const animation = element.animate(keyframes, options);
+
+  state.animations.push(animation);
+
+  // Asked for mid-build: stop what is already moving rather than wait it out.
+  if (query && !state.motionListener) {
+    state.motionMediaQuery = query;
+    state.motionListener = () => {
+      if (query.matches) {
+        declineMotion();
+      }
+    };
+
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", state.motionListener);
+    } else if (typeof query.addListener === "function") {
+      // Safari below 14 has only the deprecated spelling.
+      query.addListener(state.motionListener);
+    }
+  }
+
+  return animation;
+}
+
 /**
  * @param {EXPECTED_ANY} element element
  * @param {Record<string, string | number>} style style map
@@ -76,6 +191,32 @@ function applyStyle(element, style) {
   }
 }
 
+/**
+ * Build the linear indicator: a thin bar across the top of the viewport, the
+ * shape `progress: "linear"` selects in webpack-dev-server.
+ * @param {ShadowRoot} root the host's shadow root
+ */
+function buildBar(root) {
+  applyStyle(/** @type {HTMLElement} */ (state.host), {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "4px",
+    zIndex: 2147483645,
+    pointerEvents: "none",
+  });
+
+  state.bar = document.createElement("div");
+  applyStyle(state.bar, {
+    width: "0%",
+    height: "4px",
+    background: theme.accent,
+  });
+
+  root.appendChild(state.bar);
+}
+
 /**
  * Create (or reuse) the indicator host element.
  */
@@ -92,6 +233,16 @@ function ensureIndicator() {
 
   state.host = document.createElement("div");
   state.host.id = INDICATOR_ID;
+
+  const root = state.host.attachShadow({ mode: "open" });
+
+  if (state.type === "linear") {
+    buildBar(root);
+    document.body.appendChild(state.host);
+
+    return;
+  }
+
   applyStyle(state.host, {
     position: "fixed",
     right: "16px",
@@ -100,8 +251,6 @@ function ensureIndicator() {
     pointerEvents: "none",
   });
 
-  const root = state.host.attachShadow({ mode: "open" });
-
   const badge = document.createElement("div");
   applyStyle(badge, {
     display: "flex",
@@ -126,12 +275,10 @@ function ensureIndicator() {
   });
 
   // Pulse through the Web Animations API — no <style> element involved.
-  if (typeof state.dot.animate === "function") {
-    state.dot.animate([{ opacity: 1 }, { opacity: 0.2 }, { opacity: 1 }], {
-      duration: 1000,
-      iterations: Number.POSITIVE_INFINITY,
-    });
-  }
+  animate(state.dot, [{ opacity: 1 }, { opacity: 0.2 }, { opacity: 1 }], {
+    duration: 1000,
+    iterations: Number.POSITIVE_INFINITY,
+  });
 
   // Determinate mode: a progress ring drawn with SVG presentation attributes.
   state.ring = document.createElementNS(SVG_NS, "svg");
@@ -170,6 +317,47 @@ function ensureIndicator() {
   document.body.appendChild(state.host);
 }
 
+/**
+ * Drive the linear indicator. A percent sets the width; without one there is
+ * nothing to measure, so the bar sweeps instead — the same choice the badge
+ * makes between its ring and its pulsing dot.
+ * @param {number=} percent compilation progress (0-100)
+ */
+function showBar(percent) {
+  // Built by `ensureIndicator`, so missing only in the document-less case it
+  // already guards.
+  /* istanbul ignore next -- @preserve */
+  if (!state.bar) {
+    return;
+  }
+
+  if (typeof percent === "number") {
+    if (state.barAnimation) {
+      stopAnimations();
+      state.barAnimation = null;
+    }
+
+    state.bar.style.width = `${Math.min(100, Math.max(0, percent))}%`;
+
+    return;
+  }
+
+  if (state.barAnimation) {
+    return;
+  }
+
+  // Web Animations rather than a stylesheet: a strict `style-src` refuses a
+  // `<style>` element, which is why nothing here has one. With motion declined
+  // nothing sweeps, so the bar states that a build is running by sitting still
+  // at full width instead.
+  state.barAnimation = animate(
+    state.bar,
+    [{ transform: "translateX(-100%)" }, { transform: "translateX(250%)" }],
+    { duration: 1400, iterations: Number.POSITIVE_INFINITY },
+  );
+  state.bar.style.width = state.barAnimation ? "40%" : "100%";
+}
+
 /**
  * Show the indicator (idempotent). With a percent the badge renders a
  * progress ring; without one it renders a pulsing dot.
@@ -182,6 +370,12 @@ export function show(text, percent, source = "") {
   state.building[source] = true;
   ensureIndicator();
 
+  if (state.type === "linear") {
+    showBar(percent);
+
+    return;
+  }
+
   // `ensureIndicator` above builds the label, so it is missing only in the
   // document-less case that function already guards.
   /* istanbul ignore next -- @preserve */
@@ -229,6 +423,9 @@ export function hide(source) {
     }
   }
 
+  stopAnimations();
+  state.barAnimation = null;
+
   if (state.host && state.host.parentNode) {
     /** @type {ParentNode & Node} */
     (state.host.parentNode).removeChild(state.host);
@@ -239,5 +436,30 @@ export function hide(source) {
   state.dot = null;
   state.ring = null;
   state.ringValue = null;
+  state.bar = null;
   state.building = {};
 }
+
+/**
+ * Choose which indicator is rendered. `"circular"` is the badge this package
+ * has always shown; `"linear"` is the thin bar across the top of the viewport,
+ * so `progress` can carry the same values as webpack-dev-server's.
+ * @param {IndicatorType} type which indicator to render
+ */
+export function configure(type) {
+  if (type === state.type) {
+    return;
+  }
+
+  state.type = type;
+
+  // The two are different elements, so anything already on screen has to go;
+  // the next event rebuilds in the new shape. Which sources are mid-build is
+  // kept, so the indicator still hides only once they have all finished.
+  if (state.host) {
+    const building = state.building;
+
+    hide();
+    state.building = building;
+  }
+}
diff --git a/test/e2e/indicator.test.js b/test/e2e/indicator.test.js
index a0289ec9e..0d1be6fe9 100644
--- a/test/e2e/indicator.test.js
+++ b/test/e2e/indicator.test.js
@@ -108,6 +108,119 @@ describe("building indicator (browser)", () => {
 
     expect(await page.evaluate(() => globalThis.__badgeSeen)).toBe(false);
   });
+
+  it("renders a bar across the top for progress=linear", async () => {
+    hotApp = await createHotApp({
+      query: "?progress=linear",
+      code: acceptedApp("v1"),
+      hot: { progress: true },
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await waitForAppText(page, "v1");
+
+    // Sampled from inside the page: the indicator only exists while a build
+    // is running, which can be shorter than a round trip from the test.
+    await page.evaluate((id) => {
+      globalThis.__shapes = [];
+
+      const record = () => {
+        const host = document.getElementById(id);
+
+        if (!host || !host.shadowRoot) {
+          return;
+        }
+
+        const child = host.shadowRoot.firstElementChild;
+
+        globalThis.__shapes.push({
+          top: host.style.top,
+          width: host.style.width,
+          right: host.style.right,
+          childWidth: child ? child.style.width : null,
+        });
+      };
+
+      new MutationObserver(record).observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+      setInterval(record, 10);
+    }, INDICATOR_ID);
+
+    hotApp.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+
+    const shapes = await page.evaluate(() => globalThis.__shapes);
+
+    expect(shapes.length).toBeGreaterThan(0);
+    // Pinned to the top edge and spanning the viewport, rather than the
+    // badge's bottom-right corner.
+    expect(shapes[0].top).toBe("0px");
+    expect(shapes[0].width).toBe("100%");
+    expect(shapes[0].right).toBe("");
+    // A percentage arrives with the progress payloads, so the filled part is
+    // measured rather than sweeping.
+    expect(
+      shapes.some(
+        (shape) =>
+          shape.childWidth &&
+          shape.childWidth !== "40%" &&
+          shape.childWidth.endsWith("%"),
+      ),
+    ).toBe(true);
+  });
+
+  it("does not sweep the bar when motion is declined", async () => {
+    hotApp = await createHotApp({
+      query: "?progress=linear",
+      code: acceptedApp("v1"),
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.emulateMediaFeatures([
+      { name: "prefers-reduced-motion", value: "reduce" },
+    ]);
+    await page.goto(hotApp.url);
+    await waitForAppText(page, "v1");
+
+    await page.evaluate((id) => {
+      globalThis.__animated = [];
+
+      const record = () => {
+        const host = document.getElementById(id);
+        const child =
+          host && host.shadowRoot && host.shadowRoot.firstElementChild;
+
+        if (child) {
+          globalThis.__animated.push({
+            running: child.getAnimations
+              ? child.getAnimations().length
+              : "unsupported",
+            width: child.style.width,
+          });
+        }
+      };
+
+      new MutationObserver(record).observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+      setInterval(record, 10);
+    }, INDICATOR_ID);
+
+    hotApp.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+
+    const samples = await page.evaluate(() => globalThis.__animated);
+
+    expect(samples.length).toBeGreaterThan(0);
+    // Nothing moving, and the bar says a build is running by being full
+    // instead of by sweeping.
+    expect(samples.every((sample) => sample.running === 0)).toBe(true);
+    expect(samples.some((sample) => sample.width === "100%")).toBe(true);
+  });
 });
 
 describe("indicator shared state across bundled copies (browser)", () => {
@@ -139,6 +252,114 @@ describe("indicator shared state across bundled copies (browser)", () => {
     ({ browser, app: hotApp } = await closeE2e(browser, hotApp));
   });
 
+  it("stops a sweep when motion is declined mid-build, and recovers", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    const bar = async () =>
+      page.evaluate((id) => {
+        const host = document.getElementById(id);
+        const child =
+          host && host.shadowRoot && host.shadowRoot.firstElementChild;
+
+        return child
+          ? { width: child.style.width, running: child.getAnimations().length }
+          : null;
+      }, INDICATOR_ID);
+
+    await page.evaluate(() => {
+      globalThis.indicatorA.configure("linear");
+      // No percent, so the bar sweeps rather than measuring.
+      globalThis.indicatorA.show();
+    });
+
+    expect(await bar()).toEqual({ width: "40%", running: 1 });
+
+    // Declined while it is moving.
+    await page.emulateMediaFeatures([
+      { name: "prefers-reduced-motion", value: "reduce" },
+    ]);
+    await page.waitForFunction(
+      (id) =>
+        document.getElementById(id).shadowRoot.firstElementChild.getAnimations()
+          .length === 0,
+      { timeout: 30000 },
+      INDICATOR_ID,
+    );
+
+    // A sweep cancelled where it happened to be would sit at 40% looking like
+    // progress that stalled, and the stale animation reference would make
+    // every later call a no-op.
+    expect(await bar()).toEqual({ width: "100%", running: 0 });
+
+    await page.evaluate(() => {
+      globalThis.indicatorA.show();
+    });
+
+    expect(await bar()).toEqual({ width: "100%", running: 0 });
+  });
+
+  it("does not pile up preference listeners across builds", async () => {
+    await start();
+
+    // Tracked per query object rather than as a total, because that is where
+    // the mistake hides: `matchMedia` hands back a new `MediaQueryList` every
+    // call, so removing from a fresh one still *calls* `removeEventListener`
+    // and still leaves the listener attached to the object that has it.
+    // Installed before any page script runs, so the client's own calls count.
+    await page.evaluateOnNewDocument(() => {
+      globalThis.__attached = new Map();
+
+      const real = globalThis.matchMedia.bind(globalThis);
+
+      globalThis.matchMedia = (query) => {
+        const list = real(query);
+        const add = list.addEventListener.bind(list);
+        const remove = list.removeEventListener.bind(list);
+        const tally = (delta) => {
+          globalThis.__attached.set(
+            list,
+            (globalThis.__attached.get(list) || 0) + delta,
+          );
+        };
+
+        list.addEventListener = (...args) => {
+          tally(1);
+
+          return add(...args);
+        };
+        list.removeEventListener = (...args) => {
+          tally(-1);
+
+          return remove(...args);
+        };
+
+        return list;
+      };
+    });
+    await page.goto(hotApp.url);
+
+    const left = await page.evaluate(() => {
+      for (let i = 0; i < 3; i++) {
+        globalThis.indicatorA.show("Rebuilding…");
+        globalThis.indicatorA.hide();
+      }
+
+      let worst = 0;
+
+      for (const count of globalThis.__attached.values()) {
+        worst = Math.max(worst, count);
+      }
+
+      return { worst, queries: globalThis.__attached.size };
+    });
+
+    // Three builds registered on three query objects; none may still be
+    // holding a listener afterwards.
+    expect(left.queries).toBeGreaterThan(0);
+    expect(left.worst).toBe(0);
+  });
+
   it("drives a single badge from a second bundled copy", async () => {
     await start();
     await page.goto(hotApp.url);