From 2cda06e7a6eacf6e2de7a8a36e11262f73577dde Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Wed, 8 Apr 2026 08:40:42 +0200
Subject: [PATCH] Introduce ha-progress-bar (#51453)

* Replace mwc-linear-progress with ha-progress-bar

* Update src/panels/lovelace/cards/hui-media-control-card.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Remove duplicate import of ha-slider in hui-media-control-card.ts

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
---
 .../src/components/landing-page-logs.ts       |  3 +-
 landing-page/src/ha-landing-page.ts           |  4 +-
 package.json                                  |  1 -
 src/components/ha-file-upload.ts              | 11 ++-
 src/components/ha-slider.ts                   |  5 +-
 src/components/progress/ha-progress-bar.ts    | 92 +++++++++++++++++++
 .../{ => progress}/ha-progress-ring.ts        |  0
 src/dialogs/config-flow/step-flow-progress.ts |  2 +-
 .../more-info/controls/more-info-update.ts    | 16 ++--
 src/dialogs/restart/dialog-restart.ts         |  9 +-
 src/dialogs/sidebar/dialog-edit-sidebar.ts    |  1 -
 .../voice-assistant-setup-step-update.ts      |  2 +-
 src/onboarding/ha-onboarding.ts               | 28 +++---
 .../onboarding-restore-backup-status.ts       | 10 +-
 .../config/dashboard/ha-config-updates.ts     |  2 +-
 ...-zwave_js-rebuild-network-routes-detail.ts |  1 -
 .../dialog-zwave_js-rebuild-network-routes.ts | 16 ++--
 .../dialog-zwave_js-update-firmware-node.ts   | 15 +--
 .../zwave_js/zwave_js-config-dashboard.ts     |  2 +-
 .../lovelace/cards/hui-media-control-card.ts  | 36 ++++----
 yarn.lock                                     | 16 +---
 21 files changed, 174 insertions(+), 98 deletions(-)
 create mode 100644 src/components/progress/ha-progress-bar.ts
 rename src/components/{ => progress}/ha-progress-ring.ts (100%)

diff --git a/landing-page/src/components/landing-page-logs.ts b/landing-page/src/components/landing-page-logs.ts
index 01443cb64b..a5f031a2aa 100644
--- a/landing-page/src/components/landing-page-logs.ts
+++ b/landing-page/src/components/landing-page-logs.ts
@@ -1,6 +1,5 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
-import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts
index dfe9af8d61..b6f4bba9b9 100644
--- a/landing-page/src/ha-landing-page.ts
+++ b/landing-page/src/ha-landing-page.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress";
 import { mdiOpenInNew } from "@mdi/js";
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,6 +7,7 @@ import "../../src/components/ha-button";
 import "../../src/components/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
+import "../../src/components/progress/ha-progress-bar";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import "../../src/onboarding/onboarding-welcome-links";
 import { onBoardingStyles } from "../../src/onboarding/styles";
@@ -60,7 +60,7 @@ class HaLandingPage extends LandingPageBaseElement {
           ${!networkIssue && !this._supervisorError
             ? html`
                 <p>${this.localize("subheader")}</p>
-                <mwc-linear-progress indeterminate></mwc-linear-progress>
+                <ha-progress-bar indeterminate></ha-progress-bar>
               `
             : nothing}
           ${networkIssue || this._networkInfoError
diff --git a/package.json b/package.json
index e0ff8dd73d..50b64a9776 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-floating-label": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
-    "@material/mwc-linear-progress": "0.27.0",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-select": "0.27.0",
diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts
index 6d57855c97..cbff4af912 100644
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiDelete, mdiFileUpload } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -12,6 +11,7 @@ import type { HomeAssistant } from "../types";
 import { bytesToString } from "../util/bytes-to-string";
 import "./ha-button";
 import "./ha-icon-button";
+import "./progress/ha-progress-bar";
 
 declare global {
   interface HASSDomEvents {
@@ -100,10 +100,11 @@ export class HaFileUpload extends LitElement {
                   </div>`
                 : nothing}
             </div>
-            <mwc-linear-progress
+            <ha-progress-bar
               .indeterminate=${!this.progress}
-              .progress=${this.progress ? this.progress / 100 : undefined}
-            ></mwc-linear-progress>
+              .value=${this.progress}
+              loading
+            ></ha-progress-bar>
           </div>`
         : html`<label
             for=${this.value ? "" : "input"}
@@ -319,7 +320,7 @@ export class HaFileUpload extends LitElement {
       --mdc-button-outline-color: var(--primary-color);
       --ha-icon-button-size: 24px;
     }
-    mwc-linear-progress {
+    ha-progress-bar {
       width: 100%;
       padding: 8px 32px;
       box-sizing: border-box;
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 839ed482ec..6460d7bf9f 100644
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -23,7 +23,10 @@ export class HaSlider extends Slider {
           --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
           --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
           --wa-color-surface-default: var(--card-background-color);
-          --wa-color-neutral-fill-normal: var(--disabled-color);
+          --wa-color-neutral-fill-normal: var(
+            --ha-slider-track-color,
+            var(--disabled-color)
+          );
           --wa-tooltip-background-color: var(
             --ha-tooltip-background-color,
             var(--secondary-background-color)
diff --git a/src/components/progress/ha-progress-bar.ts b/src/components/progress/ha-progress-bar.ts
new file mode 100644
index 0000000000..57e395220e
--- /dev/null
+++ b/src/components/progress/ha-progress-bar.ts
@@ -0,0 +1,92 @@
+import ProgressBar from "@home-assistant/webawesome/dist/components/progress-bar/progress-bar";
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+
+/**
+ * Home Assistant progress bar component
+ *
+ * @element ha-progress-bar
+ * @extends {ProgressBar}
+ *
+ * @summary
+ * A stylable progress bar component based on webawesome progress bar.
+ * Supports regular, indeterminate, and loading states with Home Assistant theming.
+ *
+ * @cssprop --ha-progress-bar-indicator-color - Color of the filled progress indicator.
+ * @cssprop --ha-progress-bar-track-color - Color of the progress track.
+ * @cssprop --ha-progress-bar-track-height - Height of the progress track. Defaults to `16px`.
+ * @cssprop --ha-progress-bar-border-radius - Border radius of the progress bar. Defaults to `var(--ha-border-radius-pill)`.
+ * @cssprop --ha-progress-bar-animation-duration - Animation duration for indeterminate/loading highlight. Defaults to `2.5s`.
+ *
+ * @attr {boolean} loading - Shows the loading highlight animation on top of the indicator.
+ * @attr {boolean} indeterminate - Shows indeterminate progress animation (inherited from ProgressBar).
+ */
+@customElement("ha-progress-bar")
+export class HaProgressBar extends ProgressBar {
+  @property({ type: Boolean, reflect: true })
+  loading = false;
+
+  static get styles(): CSSResultGroup {
+    return [
+      ProgressBar.styles,
+      css`
+        :host {
+          --indicator-color: var(
+            --ha-progress-bar-indicator-color,
+            var(--ha-color-on-primary-normal)
+          );
+          --track-color: var(
+            --ha-progress-bar-track-color,
+            var(--ha-color-fill-neutral-normal-hover)
+          );
+          --track-height: var(--ha-progress-bar-track-height, 16px);
+          --wa-transition-slow: var(--ha-animation-duration-slow);
+        }
+        .progress-bar {
+          border-radius: var(
+            --ha-progress-bar-border-radius,
+            var(--ha-border-radius-pill)
+          );
+        }
+        @keyframes slide-highlight {
+          0% {
+            transform: translateX(-100%);
+          }
+          100% {
+            transform: translateX(100%);
+          }
+        }
+        :host([indeterminate]) .indicator {
+          animation: wa-progress-indeterminate
+            var(--ha-progress-bar-animation-duration, 2.5s) infinite
+            cubic-bezier(0.37, 0, 0.63, 1);
+        }
+        :host([indeterminate]) .indicator::after,
+        :host([loading]) .indicator::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            90deg,
+            transparent 0%,
+            var(--ha-color-fill-primary-normal-hover) 45%,
+            var(--ha-color-fill-primary-normal-active) 50%,
+            var(--ha-color-fill-primary-normal-hover) 55%,
+            transparent 100%
+          );
+          opacity: 0.4;
+          animation: slide-highlight
+            var(--ha-progress-bar-animation-duration, 2.5s) infinite
+            cubic-bezier(0.37, 0, 0.63, 1);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-progress-bar": HaProgressBar;
+  }
+}
diff --git a/src/components/ha-progress-ring.ts b/src/components/progress/ha-progress-ring.ts
similarity index 100%
rename from src/components/ha-progress-ring.ts
rename to src/components/progress/ha-progress-ring.ts
diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts
index a002cc0d25..5ef038f6c6 100644
--- a/src/dialogs/config-flow/step-flow-progress.ts
+++ b/src/dialogs/config-flow/step-flow-progress.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { blankBeforePercent } from "../../common/translations/blank_before_percent";
-import "../../components/ha-progress-ring";
 import "../../components/ha-spinner";
+import "../../components/progress/ha-progress-ring";
 import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts
index 2d9258626d..a87cb93454 100644
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -15,6 +14,7 @@ import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import "../../../components/ha-spinner";
 import "../../../components/ha-switch";
+import "../../../components/progress/ha-progress-bar";
 import type { BackupConfig } from "../../../data/backup";
 import { fetchBackupConfig } from "../../../data/backup";
 import { isUnavailableState } from "../../../data/entity/entity";
@@ -191,11 +191,11 @@ class MoreInfoUpdate extends LitElement {
           ${this.stateObj.attributes.in_progress
             ? supportsFeature(this.stateObj, UpdateEntityFeature.PROGRESS) &&
               this.stateObj.attributes.update_percentage !== null
-              ? html`<mwc-linear-progress
-                  .progress=${this.stateObj.attributes.update_percentage / 100}
-                  buffer=""
-                ></mwc-linear-progress>`
-              : html`<mwc-linear-progress indeterminate></mwc-linear-progress>`
+              ? html`<ha-progress-bar
+                  loading
+                  .value=${this.stateObj.attributes.update_percentage}
+                ></ha-progress-bar>`
+              : html`<ha-progress-bar indeterminate></ha-progress-bar>`
             : nothing}
           <h3>${this.stateObj.attributes.title}</h3>
           ${this._error
@@ -521,10 +521,6 @@ class MoreInfoUpdate extends LitElement {
       justify-content: center;
       align-items: center;
     }
-    mwc-linear-progress {
-      margin-bottom: calc(var(--ha-space-2) * -1);
-      margin-top: var(--ha-space-1);
-    }
     ha-markdown {
       direction: ltr;
       padding-bottom: var(--ha-space-4);
diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts
index 92797fb92b..9045ef59db 100644
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import {
   mdiAutoFix,
   mdiLifebuoy,
@@ -19,6 +18,7 @@ import "../../components/ha-icon-next";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
+import "../../components/progress/ha-progress-bar";
 import { fetchBackupInfo } from "../../data/backup";
 import type { BackupManagerState } from "../../data/backup_manager";
 import {
@@ -120,9 +120,7 @@ class DialogRestart extends LitElement {
           <div class="action-loader">
             ${this._loadingBackupInfo
               ? html`<ha-fade-in .delay=${250}>
-                  <mwc-linear-progress
-                    .indeterminate=${true}
-                  ></mwc-linear-progress>
+                  <ha-progress-bar indeterminate></ha-progress-bar>
                 </ha-fade-in>`
               : nothing}
           </div>
@@ -464,7 +462,8 @@ class DialogRestart extends LitElement {
           padding: 24px;
         }
         .action-loader {
-          height: 4px;
+          --ha-progress-bar-track-height: 4px;
+          --ha-progress-bar-border-radius: 0;
         }
       `,
     ];
diff --git a/src/dialogs/sidebar/dialog-edit-sidebar.ts b/src/dialogs/sidebar/dialog-edit-sidebar.ts
index 39a25c3983..036027ef54 100644
--- a/src/dialogs/sidebar/dialog-edit-sidebar.ts
+++ b/src/dialogs/sidebar/dialog-edit-sidebar.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiDotsVertical, mdiRestart } from "@mdi/js";
 import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts
index 9ae949c9fe..a8ce96d2f9 100644
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts
@@ -2,8 +2,8 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-progress-ring";
 import "../../components/ha-spinner";
+import "../../components/progress/ha-progress-ring";
 import { ON, UNAVAILABLE } from "../../data/entity/entity";
 import {
   updateCanInstall,
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index 9de54a2159..4e8f2a5bba 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import type { Auth } from "home-assistant-js-websocket";
 import {
   createConnection,
@@ -16,6 +15,8 @@ import {
 } from "../common/auth/token_storage";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import type { HASSDomEvent } from "../common/dom/fire_event";
+import { mainWindow } from "../common/dom/get_main_window";
+import { navigate } from "../common/navigate";
 import {
   addSearchParam,
   extractSearchParam,
@@ -33,19 +34,18 @@ import {
   onboardIntegrationStep,
 } from "../data/onboarding";
 import { subscribeUser } from "../data/ws-user";
+import { makeDialogManager } from "../dialogs/make-dialog-manager";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { HassElement } from "../state/hass-element";
 import type { HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { registerServiceWorker } from "../util/register-service-worker";
+import "../components/progress/ha-progress-bar";
 import "./onboarding-analytics";
 import "./onboarding-create-user";
 import "./onboarding-loading";
 import "./onboarding-welcome";
 import "./onboarding-welcome-links";
-import { makeDialogManager } from "../dialogs/make-dialog-manager";
-import { navigate } from "../common/navigate";
-import { mainWindow } from "../common/dom/get_main_window";
 
 type OnboardingEvent =
   | {
@@ -126,9 +126,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
   };
 
   protected render() {
-    return html`<mwc-linear-progress
-        .progress=${this._progress}
-      ></mwc-linear-progress>
+    return html`<ha-progress-bar .value=${this._progress}></ha-progress-bar>
       <ha-card>
         <div class="card-content">${this._renderStep()}</div>
       </ha-card>
@@ -318,7 +316,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
         history.replaceState(null, "", location.pathname);
         await this._connectHass(auth);
         const currentStep = steps.findIndex((stp) => !stp.done);
-        const singelStepProgress = 1 / steps.length;
+        const singelStepProgress = 100 / steps.length;
         this._progress = currentStep * singelStepProgress + singelStepProgress;
       } else {
         this._init = true;
@@ -333,7 +331,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
   }
 
   private _handleProgress(ev: HASSDomEvent<OnboardingProgressEvent>) {
-    const stepSize = 1 / this._steps!.length;
+    const stepSize = 100 / this._steps!.length;
     if (ev.detail.increase) {
       this._progress += ev.detail.increase * stepSize;
     }
@@ -355,7 +353,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       this._init = false;
       this._restoring = stepResult.result?.restore;
       if (!this._restoring) {
-        this._progress = 0.25;
+        this._progress = 25;
       } else {
         navigate(
           `${location.pathname}?${addSearchParam({ page: `restore_backup${this._restoring === "cloud" ? "_cloud" : ""}` })}`
@@ -364,7 +362,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
     } else if (stepResult.type === "user") {
       const result = stepResult.result as OnboardingResponses["user"];
       this._loading = true;
-      this._progress = 0.5;
+      this._progress = 50;
       enableWrite();
       try {
         const auth = await getAuth({
@@ -381,10 +379,10 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
         this._loading = false;
       }
     } else if (stepResult.type === "core_config") {
-      this._progress = 0.75;
+      this._progress = 75;
       // We do nothing
     } else if (stepResult.type === "analytics") {
-      this._progress = 1;
+      this._progress = 100;
       // We do nothing
     } else if (stepResult.type === "integration") {
       this._loading = true;
@@ -505,7 +503,9 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
     .card-content {
       padding: 32px;
     }
-    mwc-linear-progress {
+    ha-progress-bar {
+      --ha-progress-bar-border-radius: 0;
+      --ha-progress-bar-track-height: 4px;
       position: fixed;
       top: 0;
       left: 0;
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts
index 5b82ef1a4f..2450ae18e0 100644
--- a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts
@@ -1,12 +1,12 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../../components/ha-alert";
 import "../../components/ha-button";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import "../../components/progress/ha-progress-bar";
 import type { BackupOnboardingInfo } from "../../data/backup_onboarding";
 import { onBoardingStyles } from "../styles";
-import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("onboarding-restore-backup-status")
 class OnboardingRestoreBackupStatus extends LitElement {
@@ -33,7 +33,7 @@ class OnboardingRestoreBackupStatus extends LitElement {
         ${this.backupInfo.state === "restore_backup"
           ? html`
               <div class="loading">
-                <mwc-linear-progress indeterminate></mwc-linear-progress>
+                <ha-progress-bar indeterminate></ha-progress-bar>
               </div>
             `
           : html`
@@ -92,7 +92,7 @@ class OnboardingRestoreBackupStatus extends LitElement {
           padding: 16px 0;
           font-size: var(--ha-font-size-l);
         }
-        mwc-linear-progress {
+        ha-progress-bar {
           width: 100%;
         }
       `,
diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts
index 6b88aa8e57..010e43c672 100644
--- a/src/panels/config/dashboard/ha-config-updates.ts
+++ b/src/panels/config/dashboard/ha-config-updates.ts
@@ -12,8 +12,8 @@ import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
-import "../../../components/ha-progress-ring";
 import "../../../components/ha-spinner";
+import "../../../components/progress/ha-progress-ring";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import { subscribeDeviceRegistry } from "../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes-detail.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes-detail.ts
index 56eae4feb6..c805701a08 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes-detail.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes-detail.ts
@@ -1,5 +1,4 @@
 import { consume, type ContextType } from "@lit/context";
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes.ts
index 631684e296..8141391a9d 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes.ts
@@ -1,5 +1,4 @@
 import { consume, provide, type ContextType } from "@lit/context";
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import {
   mdiAlert,
   mdiCheckCircle,
@@ -19,6 +18,7 @@ import "../../../../../../components/ha-dialog";
 import "../../../../../../components/ha-dialog-footer";
 import "../../../../../../components/ha-fade-in";
 import "../../../../../../components/ha-spinner";
+import "../../../../../../components/progress/ha-progress-bar";
 import {
   connectionContext,
   localizeContext,
@@ -130,16 +130,14 @@ class DialogZWaveJSRebuildNetworkRoutes extends DialogMixin<ZWaveJSRebuildNetwor
                       )}
                     </p>
                   </div>
-                  <mwc-linear-progress
+                  <ha-progress-bar
+                    loading
                     .indeterminate=${!this._progress}
-                    .progress=${this._progress
-                      ? this._progressPercent(this._progress)
-                      : undefined}
-                    .buffer=${this._progress
+                    .value=${this._progress
                       ? this._progressPercent(this._progress)
                       : undefined}
                   >
-                  </mwc-linear-progress>
+                  </ha-progress-bar>
                   ${this._progress
                     ? html` <div class="progress-detail">
                         <ha-button
@@ -367,7 +365,7 @@ class DialogZWaveJSRebuildNetworkRoutes extends DialogMixin<ZWaveJSRebuildNetwor
       const done =
         progress.done.length + progress.skipped.length + progress.failed.length;
       const total = done + progress.pending.length;
-      return parseFloat((total > 0 ? done / total : 0).toFixed(2));
+      return total > 0 ? (done / total) * 100 : 0;
     }
   );
 
@@ -424,7 +422,7 @@ class DialogZWaveJSRebuildNetworkRoutes extends DialogMixin<ZWaveJSRebuildNetwor
           margin-inline-start: initial;
         }
 
-        mwc-linear-progress {
+        ha-progress-bar {
           margin-top: var(--ha-space-8);
         }
 
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
index fb91f762c4..34edc039de 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiCheckCircle, mdiCloseCircle, mdiFileUpload } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
@@ -7,12 +6,13 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
 import "../../../../../components/ha-button";
-import "../../../../../components/ha-dialog-footer";
 import "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
 import "../../../../../components/ha-file-upload";
 import "../../../../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-svg-icon";
+import "../../../../../components/progress/ha-progress-bar";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type {
   ZWaveJSControllerFirmwareUpdateFinishedMessage,
@@ -269,11 +269,12 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                     }
                   )}
                 </p>
-                <mwc-linear-progress
-                  determinate
-                  .progress=${this._updateProgressMessage.sent_fragments /
-                  this._updateProgressMessage.total_fragments}
-                ></mwc-linear-progress>
+                <ha-progress-bar
+                  loading
+                  .value=${(this._updateProgressMessage.sent_fragments /
+                    this._updateProgressMessage.total_fragments) *
+                  100}
+                ></ha-progress-bar>
                 <p>
                   ${this.hass.localize(
                     "ui.panel.config.zwave_js.update_firmware.close",
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
index 17b466f5eb..fc4b693490 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@@ -25,9 +25,9 @@ import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-progress-ring";
 import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-svg-icon";
+import "../../../../../components/progress/ha-progress-ring";
 import type { ConfigEntry } from "../../../../../data/config_entries";
 import {
   ERROR_STATES,
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 25bcfb79ad..99df15c46f 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -1,5 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
-import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress";
 import {
   mdiDotsVertical,
   mdiPlayBoxMultiple,
@@ -18,6 +16,8 @@ import { extractColors } from "../../../common/image/extract_color";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-slider";
+import type { HaSlider } from "../../../components/ha-slider";
 import "../../../components/ha-state-icon";
 import { showJoinMediaPlayersDialog } from "../../../components/media-player/show-join-media-players-dialog";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@@ -82,7 +82,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   @state() private _cardHeight = 0;
 
-  @query("mwc-linear-progress") private _progressBar?: LinearProgress;
+  @query("ha-slider") private _progressBar?: HaSlider;
 
   @state() private _marqueeActive = false;
 
@@ -342,10 +342,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
                   ${!this._showProgressBar
                     ? ""
                     : html`
-                        <mwc-linear-progress
-                          determinate
+                        <ha-slider
                           style=${styleMap({
-                            "--mdc-theme-primary":
+                            "--ha-slider-indicator-color":
                               this._foregroundColor || "var(--accent-color)",
                             cursor: supportsFeature(
                               stateObj,
@@ -356,7 +355,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
                           })}
                           @click=${this._handleSeek}
                         >
-                        </mwc-linear-progress>
+                        </ha-slider>
                       `}
                 </div>
               `
@@ -561,9 +560,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   private _updateProgressBar(): void {
     if (this._progressBar && this._stateObj?.attributes.media_duration) {
-      this._progressBar.progress =
-        getCurrentProgress(this._stateObj) /
-        this._stateObj!.attributes.media_duration;
+      this._progressBar.value =
+        (getCurrentProgress(this._stateObj) /
+          this._stateObj!.attributes.media_duration) *
+        100;
     }
   }
 
@@ -571,16 +571,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     return this.hass!.states[this._config!.entity] as MediaPlayerEntity;
   }
 
-  private _handleSeek(e: MouseEvent): void {
+  private _handleSeek(): void {
     const stateObj = this._stateObj!;
 
     if (!supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)) {
       return;
     }
 
-    const progressWidth = (this._progressBar as HTMLElement).offsetWidth;
+    const percentValue = this._progressBar?.value ?? 0;
+    const percent = percentValue ? percentValue / 100 : 0;
 
-    const percent = e.offsetX / progressWidth;
     const position = this._stateObj!.attributes.media_duration! * percent;
 
     this.hass!.callService("media_player", "media_seek", {
@@ -815,10 +815,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       padding-top: 16px;
     }
 
-    mwc-linear-progress {
+    ha-slider {
+      --track-size: 8px;
       width: 100%;
-      margin-top: 4px;
-      --mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5);
+      --ha-slider-track-color: rgba(200, 200, 200, 0.5);
+    }
+
+    ha-slider::part(thumb) {
+      display: none;
     }
 
     .no-image .controls {
diff --git a/yarn.lock b/yarn.lock
index 355c1af41c..5bbe11eee2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2546,7 +2546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/linear-progress@npm:14.0.0-canary.53b3cad2f.0, @material/linear-progress@npm:=14.0.0-canary.53b3cad2f.0":
+"@material/linear-progress@npm:14.0.0-canary.53b3cad2f.0":
   version: 14.0.0-canary.53b3cad2f.0
   resolution: "@material/linear-progress@npm:14.0.0-canary.53b3cad2f.0"
   dependencies:
@@ -2736,19 +2736,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/mwc-linear-progress@npm:0.27.0":
-  version: 0.27.0
-  resolution: "@material/mwc-linear-progress@npm:0.27.0"
-  dependencies:
-    "@material/linear-progress": "npm:=14.0.0-canary.53b3cad2f.0"
-    "@material/mwc-base": "npm:^0.27.0"
-    "@material/theme": "npm:=14.0.0-canary.53b3cad2f.0"
-    lit: "npm:^2.0.0"
-    tslib: "npm:^2.0.1"
-  checksum: 10/5358712b52ee9dc17854eb1fb254d7a9a7416b6544b7bd44d7eee97b72fb55614b7c0f6544484748a1b233b3668b085dcf7512224ce47bac9305d4b6da6aac38
-  languageName: node
-  linkType: hard
-
 "@material/mwc-list@npm:0.27.0":
   version: 0.27.0
   resolution: "@material/mwc-list@npm:0.27.0"
@@ -9069,7 +9056,6 @@ __metadata:
     "@material/mwc-drawer": "npm:0.27.0"
     "@material/mwc-floating-label": "npm:0.27.0"
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch"
-    "@material/mwc-linear-progress": "npm:0.27.0"
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
     "@material/mwc-radio": "npm:0.27.0"
     "@material/mwc-select": "npm:0.27.0"