Add shoelace loading spinner component (#24525)

* Add loading spinner component

* Update some spinners

* Update some spinners

* Update indeterminate to ha-spinner

* add ha-spinner-delayed

* Remove ha-circular-progress component

* Update demo/src/custom-cards/ha-demo-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix gallery

* Update set size

* Add ha-fade-in

* Remove wrong testing conditions

* Remove size number option

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

demo/src/custom-cards/ha-demo-card.ts

@@ -5,7 +5,7 @@ import { until } from "lit/directives/until";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
-import "../../../src/components/ha-circular-progress";
+import "../../../src/components/ha-spinner";
 import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type {
@@ -44,9 +44,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`
+              ? html`<ha-spinner></ha-spinner>`
-                  <ha-circular-progress indeterminate></ha-circular-progress>
-                `
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

gallery/src/pages/components/ha-circular-progress.ts

@@ -1,63 +0,0 @@
-import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-circular-progress";
-import "@material/web/progress/circular-progress";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-circular-progress")
-export class DemoHaCircularProgress extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`<ha-card header="Basic circular progress">
-        <div class="card-content">
-          <ha-circular-progress indeterminate></ha-circular-progress></div
-      ></ha-card>
-      <ha-card header="Different circular progress sizes">
-        <div class="card-content">
-          <ha-circular-progress
-            indeterminate
-            size="tiny"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="small"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="medium"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="large"
-          ></ha-circular-progress></div
-      ></ha-card>
-      <ha-card header="Circular progress with an aria-label">
-        <div class="card-content">
-          <ha-circular-progress
-            indeterminate
-            aria-label="Doing something..."
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            .ariaLabel=${"Doing something..."}
-          ></ha-circular-progress></div
-      ></ha-card>`;
-  }
-
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-circular-progress": DemoHaCircularProgress;
-  }
-}

gallery/src/pages/components/ha-spinner.markdown

@@ -1,4 +1,4 @@
 ---
-title: Circular Progress
+title: Spinner
 subtitle: Can be used to indicate an ongoing task.
 ---

gallery/src/pages/components/ha-spinner.ts

@@ -0,0 +1,44 @@
+import type { TemplateResult } from "lit";
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-spinner";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-spinner")
+export class DemoHaSpinner extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`<ha-card header="Basic spinner">
+        <div class="card-content">
+          <ha-spinner></ha-spinner></div
+      ></ha-card>
+      <ha-card header="Different spinner sizes">
+        <div class="card-content">
+          <ha-spinner size="tiny"></ha-spinner>
+          <ha-spinner size="small"></ha-spinner>
+          <ha-spinner size="medium"></ha-spinner>
+          <ha-spinner size="large"></ha-spinner></div
+      ></ha-card>
+      <ha-card header="Spinner with an aria-label">
+        <div class="card-content">
+          <ha-spinner aria-label="Doing something..."></ha-spinner>
+          <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
+      ></ha-card>`;
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-spinner": DemoHaSpinner;
+  }
+}

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -1,7 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -21,7 +21,7 @@ class HassioAddonConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
     const hasConfiguration =
       (this.addon.options && Object.keys(this.addon.options).length) ||

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -2,7 +2,7 @@ import "../../../../src/components/ha-card";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-markdown";
 import { customElement, property, state } from "lit/decorators";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
@@ -33,7 +33,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
     return html`
       <div class="content">

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -11,7 +11,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
-import "../../../src/components/ha-circular-progress";
 import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import {
   fetchAddonInfo,

hassio/src/addon-view/info/hassio-addon-info-tab.ts

@@ -1,7 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -23,7 +23,7 @@ class HassioAddonInfoDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
 
     return html`

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -6,7 +6,7 @@ import {
   type TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -28,9 +28,7 @@ class HassioAddonLogDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`
+      return html` <ha-spinner></ha-spinner> `;
-        <ha-circular-progress indeterminate></ha-circular-progress>
-      `;
     }
     return html`
       <div class="search">

hassio/src/components/hassio-upload-backup.ts

@@ -3,7 +3,6 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
 import type { HassioBackup } from "../../../src/data/hassio/backup";
 import { uploadBackup } from "../../../src/data/hassio/backup";

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -12,6 +12,7 @@ import "../../../../src/components/ha-md-dialog";
 import "../../../../src/components/ha-dialog-header";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
@@ -138,7 +139,7 @@ class HassioBackupDialog
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : this._restoringBackup
               ? html`<div class="loading">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                 </div>`
               : html`
                   <supervisor-backup-content
@@ -310,10 +311,6 @@ class HassioBackupDialog
       haStyle,
       haStyleDialog,
       css`
-        ha-circular-progress {
-          display: block;
-          text-align: center;
-        }
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -5,6 +5,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import {
   createHassioFullBackup,
@@ -58,7 +59,7 @@ class HassioCreateBackupDialog extends LitElement {
         )}
       >
         ${this._creatingBackup
-          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+          ? html`<ha-spinner></ha-spinner>`
           : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}
@@ -142,10 +143,6 @@ class HassioCreateBackupDialog extends LitElement {
         :host {
           direction: var(--direction);
         }
-        ha-circular-progress {
-          display: block;
-          text-align: center;
-        }
       `,
     ];
   }

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-dialog";
 import {
@@ -69,12 +69,7 @@ class HassioDatadiskDialog extends LitElement {
         ?hideActions=${this.moving}
       >
         ${this.moving
-          ? html` <ha-circular-progress
+          ? html`<ha-spinner aria-label="Moving" size="large"></ha-spinner>
-                aria-label="Moving"
-                size="large"
-                indeterminate
-              >
-              </ha-circular-progress>
               <p class="progress-text">
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.moving_desc"
@@ -166,7 +161,7 @@ class HassioDatadiskDialog extends LitElement {
         ha-select {
           width: 100%;
         }
-        ha-circular-progress {
+        ha-spinner {
           display: block;
           margin: 32px;
           text-align: center;

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -10,7 +10,7 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
@@ -161,12 +161,8 @@ export class DialogHassioNetwork
                   .disabled=${this._scanning}
                 >
                   ${this._scanning
-                    ? html`<ha-circular-progress
+                    ? html`<ha-spinner aria-label="Scanning" size="small">
-                        aria-label="Scanning"
+                      </ha-spinner>`
-                        indeterminate
-                        size="small"
-                      >
-                      </ha-circular-progress>`
                     : this.supervisor.localize("dialog.network.scan_ap")}
                 </mwc-button>
                 ${this._accessPoints &&
@@ -282,8 +278,7 @@ export class DialogHassioNetwork
         </mwc-button>
         <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
           ${this._processing
-            ? html`<ha-circular-progress indeterminate size="small">
+            ? html`<ha-spinner size="small"> </ha-spinner>`
-              </ha-circular-progress>`
             : this.supervisor.localize("common.save")}
         </mwc-button>
       </div>`;

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -8,7 +8,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-tooltip";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import type {
@@ -161,10 +161,7 @@ class HassioRepositoriesDialog extends LitElement {
             ></ha-textfield>
             <mwc-button @click=${this._addRepository}>
               ${this._processing
-                ? html`<ha-circular-progress
+                ? html`<ha-spinner size="small"></ha-spinner>`
-                    indeterminate
-                    size="small"
-                  ></ha-circular-progress>`
                 : this._dialogParams!.supervisor.localize(
                     "dialog.repositories.add"
                   )}
@@ -202,7 +199,7 @@ class HassioRepositoriesDialog extends LitElement {
           margin-inline-start: 8px;
           margin-inline-end: initial;
         }
-        ha-circular-progress {
+        ha-spinner {
           display: block;
           margin: 32px;
           text-align: center;

hassio/src/update-available/update-available-card.ts

@@ -15,6 +15,7 @@ import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-spinner";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-faded";
 import "../../../src/components/ha-icon-button";
@@ -192,12 +193,10 @@ class UpdateAvailableCard extends LitElement {
                       `
                     : nothing}
                 `
-              : html`<ha-circular-progress
+              : html`<ha-spinner
                     aria-label="Updating"
                     size="large"
-                    indeterminate
+                  ></ha-spinner>
-                  >
-                  </ha-circular-progress>
                   <p class="progress-text">
                     ${this.supervisor.localize("update_available.updating", {
                       name: this._name,
@@ -465,7 +464,7 @@ class UpdateAvailableCard extends LitElement {
           justify-content: space-between;
         }
 
-        ha-circular-progress {
+        ha-spinner {
           display: block;
           margin: 32px;
           text-align: center;

src/components/buttons/ha-progress-button.ts

@@ -3,7 +3,7 @@ import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../ha-circular-progress";
+import "../ha-spinner";
 import "../ha-svg-icon";
 
 @customElement("ha-progress-button")
@@ -35,12 +35,7 @@ export class HaProgressButton extends LitElement {
                 : this._result === "error"
                   ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
                   : this.progress
-                    ? html`
+                    ? html`<ha-spinner size="small"></ha-spinner>`
-                        <ha-circular-progress
-                          size="small"
-                          indeterminate
-                        ></ha-circular-progress>
-                      `
                     : nothing}
             </div>
           `}

src/components/ha-circular-progress.ts

@@ -1,49 +0,0 @@
-import { MdCircularProgress } from "@material/web/progress/circular-progress";
-import type { PropertyValues } from "lit";
-import { css } from "lit";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-circular-progress")
-export class HaCircularProgress extends MdCircularProgress {
-  @property({ attribute: "aria-label", type: String }) public ariaLabel =
-    "Loading";
-
-  @property() public size?: "tiny" | "small" | "medium" | "large";
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("size")) {
-      switch (this.size) {
-        case "tiny":
-          this.style.setProperty("--md-circular-progress-size", "16px");
-          break;
-        case "small":
-          this.style.setProperty("--md-circular-progress-size", "28px");
-          break;
-        case "medium":
-          this.style.setProperty("--md-circular-progress-size", "48px");
-          break;
-        case "large":
-          this.style.setProperty("--md-circular-progress-size", "68px");
-          break;
-      }
-    }
-  }
-
-  static override styles = [
-    ...super.styles,
-    css`
-      :host {
-        --md-sys-color-primary: var(--primary-color);
-        --md-circular-progress-size: 48px;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-circular-progress": HaCircularProgress;
-  }
-}

src/components/ha-fade-in.ts

@@ -0,0 +1,19 @@
+import SlAnimation from "@shoelace-style/shoelace/dist/components/animation/animation.component";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-fade-in")
+export class HaFadeIn extends SlAnimation {
+  @property() public name = "fadeIn";
+
+  @property() public fill: FillMode = "both";
+
+  @property({ type: Boolean }) public play = true;
+
+  @property({ type: Number }) public iterations = 1;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-fade-in": HaFadeIn;
+  }
+}

src/components/ha-picture-upload.ts

@@ -17,7 +17,6 @@ import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cro
 import { showImageCropperDialog } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import type { HomeAssistant } from "../types";
 import "./ha-button";
-import "./ha-circular-progress";
 import "./ha-file-upload";
 import { showMediaBrowserDialog } from "./media-player/show-media-browser-dialog";
 

src/components/ha-progress-ring.ts

@@ -0,0 +1,58 @@
+import ProgressRing from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component";
+import progressRingStyles from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.styles";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-progress-ring")
+export class HaProgressRing extends ProgressRing {
+  @property() public size?: "tiny" | "small" | "medium" | "large";
+
+  public updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has("size")) {
+      switch (this.size) {
+        case "tiny":
+          this.style.setProperty("--ha-progress-ring-size", "16px");
+          break;
+        case "small":
+          this.style.setProperty("--ha-progress-ring-size", "28px");
+          break;
+        case "medium":
+          this.style.setProperty("--ha-progress-ring-size", "48px");
+          break;
+        case "large":
+          this.style.setProperty("--ha-progress-ring-size", "68px");
+          break;
+        case undefined:
+          this.style.removeProperty("--ha-progress-ring-size");
+          break;
+      }
+    }
+  }
+
+  static override styles = [
+    progressRingStyles,
+    css`
+      :host {
+        --indicator-color: var(
+          --ha-progress-ring-indicator-color,
+          var(--primary-color)
+        );
+        --track-color: var(
+          --ha-progress-ring-divider-color,
+          var(--divider-color)
+        );
+        --track-width: 4px;
+        --speed: 3.5s;
+        --size: var(--ha-progress-ring-size, 48px);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-progress-ring": HaProgressRing;
+  }
+}

src/components/ha-spinner.ts

@@ -0,0 +1,56 @@
+import Spinner from "@shoelace-style/shoelace/dist/components/spinner/spinner.component";
+import spinnerStyles from "@shoelace-style/shoelace/dist/components/spinner/spinner.styles";
+import type { PropertyValues } from "lit";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-spinner")
+export class HaSpinner extends Spinner {
+  @property() public size?: "tiny" | "small" | "medium" | "large";
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (changedProps.has("size")) {
+      switch (this.size) {
+        case "tiny":
+          this.style.setProperty("--ha-spinner-size", "16px");
+          break;
+        case "small":
+          this.style.setProperty("--ha-spinner-size", "28px");
+          break;
+        case "medium":
+          this.style.setProperty("--ha-spinner-size", "48px");
+          break;
+        case "large":
+          this.style.setProperty("--ha-spinner-size", "68px");
+          break;
+        case undefined:
+          this.style.removeProperty("--ha-progress-ring-size");
+          break;
+      }
+    }
+  }
+
+  static override styles = [
+    spinnerStyles,
+    css`
+      :host {
+        --indicator-color: var(
+          --ha-spinner-indicator-color,
+          var(--primary-color)
+        );
+        --track-color: var(--ha-spinner-divider-color, var(--divider-color));
+        --track-width: 4px;
+        --speed: 3.5s;
+        font-size: var(--ha-spinner-size, 48px);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-spinner": HaSpinner;
+  }
+}

src/components/media-player/dialog-media-manage.ts

@@ -22,7 +22,7 @@ import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-check-list-item";
-import "../ha-circular-progress";
+import "../ha-spinner";
 import "../ha-dialog";
 import "../ha-dialog-header";
 import "../ha-svg-icon";
@@ -151,7 +151,7 @@ class DialogMediaManage extends LitElement {
         ${!this._currentItem
           ? html`
               <div class="refresh">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
               </div>
             `
           : !children.length

src/components/media-player/ha-media-manage-button.ts

@@ -62,8 +62,7 @@ class MediaManageButton extends LitElement {
       --mdc-button-disabled-ink-color: --mdc-theme-primary;
     }
 
-    ha-svg-icon[slot="icon"],
+    ha-svg-icon[slot="icon"] {
-    ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
 

src/components/media-player/ha-media-player-browse.ts

@@ -45,7 +45,7 @@ import "../entity/ha-entity-picker";
 import "../ha-alert";
 import "../ha-button-menu";
 import "../ha-card";
-import "../ha-circular-progress";
+import "../ha-spinner";
 import "../ha-fab";
 import "../ha-icon-button";
 import "../ha-svg-icon";
@@ -325,7 +325,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
 
     if (!this._currentItem) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
 
     const currentItem = this._currentItem;
@@ -873,11 +873,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           direction: ltr;
         }
 
-        ha-circular-progress {
+        ha-spinner {
-          --mdc-theme-primary: var(--primary-color);
+          margin: 40px auto;
-          display: flex;
-          justify-content: center;
-          margin: 40px;
         }
 
         .container {

src/components/media-player/ha-media-upload-button.ts

@@ -10,7 +10,7 @@ import {
 } from "../../data/media_source";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
-import "../ha-circular-progress";
+import "../ha-spinner";
 import "../ha-svg-icon";
 
 declare global {
@@ -52,12 +52,11 @@ class MediaUploadButton extends LitElement {
       >
         ${this._uploading > 0
           ? html`
-              <ha-circular-progress
+              <ha-spinner
                 size="small"
-                indeterminate
                 area-label="Uploading"
                 slot="icon"
-              ></ha-circular-progress>
+              ></ha-spinner>
             `
           : html` <ha-svg-icon .path=${mdiUpload} slot="icon"></ha-svg-icon> `}
       </mwc-button>
@@ -116,7 +115,7 @@ class MediaUploadButton extends LitElement {
     }
 
     ha-svg-icon[slot="icon"],
-    ha-circular-progress[slot="icon"] {
+    ha-spinner[slot="icon"] {
       vertical-align: middle;
     }
 

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -6,7 +6,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-icon-button";
 import type { DataEntryFlowStep } from "../../data/data_entry_flow";

src/dialogs/config-flow/previews/flow-preview-generic_camera.ts

@@ -2,7 +2,7 @@ import { html, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import { FlowPreviewGeneric } from "./flow-preview-generic";
 import "../../../components/ha-hls-player";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 
 @customElement("flow-preview-generic_camera")
 class FlowPreviewGenericCamera extends FlowPreviewGeneric {
@@ -25,12 +25,11 @@ class FlowPreviewGenericCamera extends FlowPreviewGeneric {
       : ""}
     ${streamUrl
       ? html`<p>Stream:</p>
-          <ha-circular-progress
+          <ha-spinner
             class="render-spinner"
             id="hls-load-spinner"
-            indeterminate
             size="large"
-          ></ha-circular-progress>
+          ></ha-spinner>
           <ha-hls-player
             autoplay
             playsinline

src/dialogs/config-flow/step-flow-form.ts

@@ -6,7 +6,7 @@ import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isNavigationClick } from "../../common/dom/is-navigation-click";
 import "../../components/ha-alert";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
 import "../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../components/ha-form/types";
@@ -84,7 +84,7 @@ class StepFlowForm extends LitElement {
         ${this._loading
           ? html`
               <div class="submit-spinner">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
               </div>
             `
           : html`

src/dialogs/config-flow/step-flow-loading.ts

@@ -1,7 +1,7 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import type { DataEntryFlowStep } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig, LoadingReason } from "./show-dialog-data-entry-flow";
@@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement {
     return html`
       <div class="init-spinner">
         ${description ? html`<div>${description}</div>` : ""}
-        <ha-circular-progress indeterminate></ha-circular-progress>
+        <ha-spinner></ha-spinner>
       </div>
     `;
   }
@@ -38,7 +38,7 @@ class StepFlowLoading extends LitElement {
       padding: 50px 100px;
       text-align: center;
     }
-    ha-circular-progress {
+    ha-spinner {
       margin-top: 16px;
     }
   `;

src/dialogs/config-flow/step-flow-progress.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
@@ -25,7 +25,7 @@ class StepFlowProgress extends LitElement {
         ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
       </h2>
       <div class="content">
-        <ha-circular-progress indeterminate></ha-circular-progress>
+        <ha-spinner></ha-spinner>
         ${this.flowConfig.renderShowFormProgressDescription(
           this.hass,
           this.step
@@ -42,7 +42,7 @@ class StepFlowProgress extends LitElement {
           padding: 50px 100px;
           text-align: center;
         }
-        ha-circular-progress {
+        ha-spinner {
           margin-bottom: 16px;
         }
       `,

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -3,7 +3,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import type { HomeAssistant } from "../../../types";
@@ -52,10 +52,10 @@ export class MoreInfoConfigurator extends LitElement {
                 @click=${this._submitClicked}
               >
                 ${this._isConfiguring
-                  ? html`<ha-circular-progress
+                  ? html`<ha-spinner
-                      indeterminate
+                      size="tiny"
                       aria-label="Configuring"
-                    ></ha-circular-progress>`
+                    ></ha-spinner>`
                   : ""}
                 ${this.stateObj.attributes.submit_caption}
               </mwc-button>
@@ -114,12 +114,10 @@ export class MoreInfoConfigurator extends LitElement {
       height: 41px;
     }
 
-    ha-circular-progress {
+    ha-spinner {
-      width: 14px;
+      --ha-spinner-indicator-color: var(--primary-text-color);
-      height: 14px;
+      margin-right: auto;
-      margin-right: 20px;
+      margin-left: auto;
-      margin-inline-end: 20px;
-      margin-inline-start: initial;
     }
   `;
 }

src/dialogs/more-info/controls/more-info-conversation.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-attributes";
 import type { HomeAssistant } from "../../../types";
 import "../../../components/ha-assist-chat";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-alert";
 import type { AssistPipeline } from "../../../data/assist_pipeline";
 import { getAssistPipeline } from "../../../data/assist_pipeline";
@@ -82,10 +82,7 @@ class MoreInfoConversation extends LitElement {
               ></ha-assist-chat>
             `
           : html`<div class="pipelines-loading">
-              <ha-circular-progress
+              <ha-spinner size="large"></ha-spinner>
-                indeterminate
-                size="large"
-              ></ha-circular-progress>
             </div>`}
     `;
   }

src/dialogs/more-info/controls/more-info-update.ts

@@ -7,7 +7,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-checkbox";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-faded";
 import "../../../components/ha-formfield";
 import "../../../components/ha-markdown";
@@ -307,7 +307,7 @@ class MoreInfoUpdate extends LitElement {
   private _renderLoader() {
     return html`
       <div class="flex center loader">
-        <ha-circular-progress indeterminate></ha-circular-progress>
+        <ha-spinner></ha-spinner>
       </div>
     `;
   }

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -25,7 +25,7 @@ import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
 import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import "../../components/ha-icon-button";
 import "../../components/ha-label";
 import "../../components/ha-list-item";
@@ -237,10 +237,7 @@ export class QuickBar extends LitElement {
           </ha-textfield>
         </div>
         ${!items
-          ? html`<ha-circular-progress
+          ? html`<ha-spinner size="small"></ha-spinner>`
-              size="small"
-              indeterminate
-            ></ha-circular-progress>`
           : items.length === 0
             ? html`
                 <div class="nothing-found">
@@ -425,10 +422,9 @@ export class QuickBar extends LitElement {
   }
 
   private _addSpinnerToCommandItem(index: number): void {
-    const spinner = document.createElement("ha-circular-progress");
+    const spinner = document.createElement("ha-spinner");
     spinner.size = "small";
     spinner.slot = "meta";
-    spinner.indeterminate = true;
     this._getItemAtIndex(index)?.appendChild(spinner);
   }
 

src/dialogs/restart/dialog-restart.ts

@@ -11,7 +11,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
 import "../../components/ha-md-list";
@@ -103,7 +103,7 @@ class DialogRestart extends LitElement {
           ${this._loadingHostInfo
             ? html`
                 <div class="loader">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                 </div>
               `
             : html`

src/dialogs/tts-try/dialog-tts-try.ts

@@ -11,7 +11,7 @@ import { convertTextToSpeech } from "../../data/tts";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import type { TTSTryDialogParams } from "./show-dialog-tts-try";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 
 @customElement("dialog-tts-try")
 export class TTSTryDialog extends LitElement {
@@ -83,12 +83,11 @@ export class TTSTryDialog extends LitElement {
         </ha-textarea>
         ${this._loadingExample
           ? html`
-              <ha-circular-progress
+              <ha-spinner
                 size="small"
-                indeterminate
                 slot="primaryAction"
                 class="loading"
-              ></ha-circular-progress>
+              ></ha-spinner>
             `
           : html`
               <ha-button

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts

@@ -2,7 +2,7 @@ import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import { testAssistSatelliteConnection } from "../../data/assist_satellite";
 import type { HomeAssistant } from "../../types";
 import { AssistantSetupStyles } from "./styles";
@@ -83,11 +83,7 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
               )}
             </p>
 
-            ${this._showLoader
+            ${this._showLoader ? html`<ha-spinner></ha-spinner>` : nothing}`}
-              ? html`<ha-circular-progress
-                  indeterminate
-                ></ha-circular-progress>`
-              : nothing} `}
     </div>`;
   }
 

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import {
   createAssistPipeline,
   listAssistPipelines,
@@ -64,7 +64,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                 "ui.panel.config.voice_assistants.satellite_wizard.local.secondary"
               )}
             </p>
-            <ha-circular-progress indeterminate></ha-circular-progress>
+            <ha-spinner></ha-spinner>
             <p>
               ${this._detailState || "Installation can take several minutes"}
             </p>`
@@ -425,7 +425,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
   static styles = [
     AssistantSetupStyles,
     css`
-      ha-circular-progress {
+      ha-spinner {
         margin-top: 24px;
         margin-bottom: 24px;
       }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts

@@ -2,7 +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-circular-progress";
+import "../../components/ha-progress-ring";
+import "../../components/ha-spinner";
 import { ON, UNAVAILABLE } from "../../data/entity";
 import {
   updateCanInstall,
@@ -84,12 +85,13 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
           "ui.panel.config.voice_assistants.satellite_wizard.update.secondary"
         )}
       </p>
-      <ha-circular-progress
+      ${progressIsNumeric
-        .value=${progressIsNumeric
+        ? html`
-          ? (stateObj.attributes.update_percentage as number) / 100
+            <ha-progress-ring
-          : undefined}
+              .value=${stateObj.attributes.update_percentage as number}
-        .indeterminate=${!progressIsNumeric}
+            ></ha-progress-ring>
-      ></ha-circular-progress>
+          `
+        : html`<ha-spinner></ha-spinner>`}
       <p>
         ${stateObj?.state === UNAVAILABLE
           ? "Restarting voice assistant"
@@ -145,7 +147,8 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
   static styles = [
     AssistantSetupStyles,
     css`
-      ha-circular-progress {
+      ha-progress-ring,
+      ha-spinner {
         margin-top: 24px;
         margin-bottom: 24px;
       }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -5,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
+import "../../components/ha-spinner";
 import "../../components/ha-dialog-header";
 import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
 import { interceptWakeWord } from "../../data/assist_satellite";
@@ -93,7 +94,7 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
     const entityState = this.hass.states[this.assistEntityId];
 
     if (entityState.state !== "idle") {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
 
     return html`<div class="content">

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -19,7 +19,7 @@ import "../../components/ha-icon-button";
 import "../../components/ha-list-item";
 import "../../components/ha-alert";
 import "../../components/ha-assist-chat";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import type { AssistPipeline } from "../../data/assist_pipeline";
 import {
   getAssistPipeline,
@@ -113,10 +113,7 @@ export class HaVoiceCommandDialog extends LitElement {
               </ha-button>
               ${!this._pipelines
                 ? html`<div class="pipelines-loading">
-                    <ha-circular-progress
+                    <ha-spinner size="small"></ha-spinner>
-                      indeterminate
-                      size="small"
-                    ></ha-circular-progress>
                   </div>`
                 : this._pipelines?.map(
                     (pipeline) =>
@@ -180,10 +177,7 @@ export class HaVoiceCommandDialog extends LitElement {
                 </ha-assist-chat>
               `
             : html`<div class="pipelines-loading">
-                <ha-circular-progress
+                <ha-spinner size="large"></ha-spinner>
-                  indeterminate
-                  size="large"
-                ></ha-circular-progress>
               </div>`}
       </ha-dialog>
     `;

src/layouts/ha-init-page.ts

@@ -36,7 +36,7 @@ class HaInitPage extends LitElement {
         `
       : html`
           <div id="progress-indicator-wrapper">
-            <ha-circular-progress indeterminate></ha-circular-progress>
+            <ha-spinner></ha-spinner>
           </div>
           <div id="loading-text">
             ${this.migration
@@ -70,7 +70,7 @@ class HaInitPage extends LitElement {
 
   protected firstUpdated() {
     this._showProgressIndicatorTimeout = window.setTimeout(() => {
-      import("../components/ha-circular-progress");
+      import("../components/ha-spinner");
     }, 5000);
 
     this._retryInterval = window.setInterval(() => {

src/layouts/hass-loading-screen.ts

@@ -1,7 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../components/ha-circular-progress";
+import "../components/ha-spinner";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { haStyle } from "../resources/styles";
@@ -40,7 +40,7 @@ class HassLoadingScreen extends LitElement {
                 `}
           </div>`}
       <div class="content">
-        <ha-circular-progress indeterminate></ha-circular-progress>
+        <ha-spinner></ha-spinner>
         ${this.message
           ? html`<div id="loading-text">${this.message}</div>`
           : nothing}

src/onboarding/onboarding-core-config.ts

@@ -6,7 +6,7 @@ import { LOCAL_TIME_ZONE } from "../common/datetime/resolve-time-zone";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
-import "../components/ha-circular-progress";
+import "../components/ha-spinner";
 import { COUNTRIES } from "../components/ha-country-picker";
 import type { ConfigUpdateValues } from "../data/core";
 import { saveCoreConfig } from "../data/core";
@@ -52,7 +52,7 @@ class OnboardingCoreConfig extends LitElement {
     }
     if (this._skipCore) {
       return html`<div class="row center">
-        <ha-circular-progress indeterminate></ha-circular-progress>
+        <ha-spinner></ha-spinner>
       </div>`;
     }
     return html`

src/onboarding/onboarding-location.ts

@@ -13,7 +13,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
-import "../components/ha-circular-progress";
+import "../components/ha-spinner";
 import "../components/ha-formfield";
 import "../components/ha-list-item";
 import "../components/ha-radio";
@@ -115,13 +115,7 @@ class OnboardingLocation extends LitElement {
         >
           <ha-svg-icon slot="leadingIcon" .path=${mdiMagnify}></ha-svg-icon>
           ${this._working
-            ? html`
+            ? html` <ha-spinner slot="trailingIcon" size="small"></ha-spinner> `
-                <ha-circular-progress
-                  slot="trailingIcon"
-                  indeterminate
-                  size="small"
-                ></ha-circular-progress>
-              `
             : html`
                 <ha-icon-button
                   @click=${this._handleButtonClick}
@@ -500,7 +494,7 @@ class OnboardingLocation extends LitElement {
           inset-inline-end: 10px;
           direction: var(--direction);
         }
-        ha-textfield > ha-circular-progress {
+        ha-textfield > ha-spinner {
           position: relative;
           left: 12px;
           inset-inline-start: 12px;

src/onboarding/onboarding-restore-backup.ts

@@ -8,7 +8,7 @@ import "./restore-backup/onboarding-restore-backup-status";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
 import "../components/ha-icon-button-arrow-prev";
-import "../components/ha-circular-progress";
+import "../components/ha-spinner";
 import "../components/ha-alert";
 import "./onboarding-loading";
 import { removeSearchParam } from "../common/url/search-params";
@@ -91,7 +91,7 @@ class OnboardingRestoreBackup extends LitElement {
       ${
         this._view === "loading"
           ? html`<div class="loading">
-              <ha-circular-progress indeterminate></ha-circular-progress>
+              <ha-spinner></ha-spinner>
             </div>`
           : this._view === "upload"
             ? html`

src/onboarding/restore-backup/onboarding-restore-backup-details.ts

@@ -1,7 +1,6 @@
 import { css, html, LitElement, type CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../components/ha-card";
-import "../../components/ha-circular-progress";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../panels/config/backup/components/ha-backup-details-restore";

src/onboarding/restore-backup/onboarding-restore-backup-status.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../components/ha-card";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import { haStyle } from "../../resources/styles";
@@ -29,7 +29,7 @@ class OnboardingRestoreBackupStatus extends LitElement {
           ${this.backupInfo.state === "restore_backup"
             ? html`
                 <div class="loading">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                 </div>
                 <p>
                   ${this.localize(

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -7,7 +7,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-combo-box";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
@@ -231,7 +231,7 @@ export class DialogAddApplicationCredential extends LitElement {
         ${this._loading
           ? html`
               <div slot="primaryAction" class="submit-spinner">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
               </div>
             `
           : html`

src/panels/config/backup/components/ha-backup-summary-card.ts

@@ -9,7 +9,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-button";
 import "../../../../components/ha-card";
-import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-spinner";
 import "../../../../components/ha-icon";
 
 type SummaryStatus = "success" | "error" | "info" | "warning" | "loading";
@@ -41,7 +41,7 @@ class HaBackupSummaryCard extends LitElement {
       <ha-card outlined>
         <div class="summary">
           ${this.status === "loading"
-            ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+            ? html`<ha-spinner></ha-spinner>`
             : html`
                 <div class="icon ${this.status}">
                   <ha-svg-icon .path=${ICONS[this.status]}></ha-svg-icon>
@@ -115,8 +115,8 @@ class HaBackupSummaryCard extends LitElement {
       width: 24px;
       height: 24px;
     }
-    ha-circular-progress {
+    ha-spinner {
-      --md-circular-progress-size: 40px;
+      --ha-spinner-size: 40px;
     }
     .content {
       display: flex;

src/panels/config/backup/dialogs/dialog-restore-backup.ts

@@ -5,7 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
-import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-spinner";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-password-field";
 
@@ -239,7 +239,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
 
   private _renderProgress() {
     return html`<div class="centered">
-      <ha-circular-progress indeterminate></ha-circular-progress>
+      <ha-spinner></ha-spinner>
       <p>
         ${this.hass.connected
           ? this._restoreState()
@@ -366,7 +366,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
           flex-direction: column;
           align-items: center;
         }
-        ha-circular-progress {
+        ha-spinner {
           margin-bottom: 16px;
         }
         ha-alert[alert-type="warning"] {

src/panels/config/backup/ha-config-backup-backups.ts

@@ -27,7 +27,7 @@ import type {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
@@ -456,11 +456,8 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
                 @click=${this._newBackup}
               >
                 ${backupInProgress
-                  ? html`<div slot="icon">
+                  ? html`<div slot="icon" class="loading">
-                      <ha-circular-progress
+                      <ha-spinner .size=${"small"}></ha-spinner>
-                        .size=${"small"}
-                        indeterminate
-                      ></ha-circular-progress>
                     </div>`
                   : html`<ha-svg-icon
                       slot="icon"
@@ -613,8 +610,11 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
-        ha-circular-progress {
+        .loading {
-          --md-sys-color-primary: var(--mdc-theme-on-secondary);
+          display: flex;
+        }
+        ha-spinner {
+          --ha-spinner-indicator-color: var(--mdc-theme-on-secondary);
         }
       `,
     ];

src/panels/config/backup/ha-config-backup-details.ts

@@ -14,7 +14,8 @@ import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-fade-in";
+import "../../../components/ha-spinner";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-md-list";
@@ -146,7 +147,9 @@ class HaConfigBackupDetails extends LitElement {
                 </ha-alert>
               `
             : !this._backup
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html`<ha-fade-in .delay=${1000}
+                  ><ha-spinner></ha-spinner
+                ></ha-fade-in>`
               : html`
                   <ha-backup-details-summary
                     .backup=${this._backup}
@@ -357,6 +360,9 @@ class HaConfigBackupDetails extends LitElement {
       display: grid;
       margin-bottom: 24px;
     }
+    ha-spinner {
+      margin: 24px auto;
+    }
     .card-content {
       padding: 0 20px;
     }

src/panels/config/backup/ha-config-backup-location.ts

@@ -6,7 +6,8 @@ import "../../../components/ha-button";
 import "../../../components/ha-switch";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-fade-in";
+import "../../../components/ha-spinner";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-md-list";
@@ -92,7 +93,9 @@ class HaConfigBackupDetails extends LitElement {
                 </ha-alert>
               `
             : !this.agentId
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html`<ha-fade-in .delay=${1000}
+                  ><ha-spinner></ha-spinner
+                ></ha-fade-in>`
               : html`
                   ${CLOUD_AGENT === this.agentId
                     ? html`
@@ -358,6 +361,9 @@ class HaConfigBackupDetails extends LitElement {
     .card-header {
       padding-bottom: 8px;
     }
+    ha-spinner {
+      margin: 24px auto;
+    }
   `;
 }
 

src/panels/config/backup/ha-config-backup-overview.ts

@@ -8,7 +8,7 @@ import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-icon-overflow-menu";
@@ -231,11 +231,8 @@ class HaConfigBackupOverview extends LitElement {
           @click=${this._newBackup}
         >
           ${backupInProgress
-            ? html`<div slot="icon">
+            ? html`<div slot="icon" class="loading">
-                <ha-circular-progress
+                <ha-spinner .size=${"small"}></ha-spinner>
-                  .size=${"small"}
-                  indeterminate
-                ></ha-circular-progress>
               </div>`
             : html`<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>`}
         </ha-fab>
@@ -264,8 +261,11 @@ class HaConfigBackupOverview extends LitElement {
           padding-left: 0;
           padding-right: 0;
         }
-        ha-circular-progress {
+        .loading {
-          --md-sys-color-primary: var(--mdc-theme-on-secondary);
+          display: flex;
+        }
+        ha-spinner {
+          --ha-spinner-indicator-color: var(--mdc-theme-on-secondary);
         }
       `,
     ];

src/panels/config/blueprint/blueprint-generic-editor.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-markdown";
 import "../../../components/ha-selector/ha-selector";
 import "../../../components/ha-settings-row";
@@ -77,7 +77,7 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
               : this.hass.localize(
                   "ui.panel.config.automation.editor.blueprint.no_blueprints"
                 )
-            : html`<ha-circular-progress indeterminate></ha-circular-progress>`}
+            : html`<ha-spinner></ha-spinner>`}
         </div>
 
         ${this._config.use_blueprint.path

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -3,7 +3,7 @@ import { mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-markdown";
@@ -159,13 +159,12 @@ class DialogImportBlueprint extends LitElement {
                 .disabled=${this._importing}
               >
                 ${this._importing
-                  ? html`<ha-circular-progress
+                  ? html`<ha-spinner
-                      indeterminate
                       size="small"
                       .ariaLabel=${this.hass.localize(
                         "ui.panel.config.blueprint.add.importing"
                       )}
-                    ></ha-circular-progress>`
+                    ></ha-spinner>`
                   : ""}
                 ${this.hass.localize(
                   "ui.panel.config.blueprint.add.import_btn"
@@ -179,13 +178,12 @@ class DialogImportBlueprint extends LitElement {
                 .disabled=${this._saving || this._result.validation_errors}
               >
                 ${this._saving
-                  ? html`<ha-circular-progress
+                  ? html`<ha-spinner
-                      indeterminate
                       size="small"
                       .ariaLabel=${this.hass.localize(
                         "ui.panel.config.blueprint.add.saving"
                       )}
-                    ></ha-circular-progress>`
+                    ></ha-spinner>`
                   : ""}
                 ${this._result.exists
                   ? this.hass.localize(

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import "../../../../components/ha-card";
-import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-spinner";
 import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import type { CloudStatusLoggedIn, CloudWebhook } from "../../../../data/cloud";
@@ -88,9 +88,7 @@ export class CloudWebhooks extends LitElement {
                       ${this._progress.includes(entry.webhook_id)
                         ? html`
                             <div class="progress">
-                              <ha-circular-progress
+                              <ha-spinner></ha-spinner>
-                                indeterminate
-                              ></ha-circular-progress>
                             </div>
                           `
                         : this._cloudHooks![entry.webhook_id]

src/panels/config/cloud/account/dialog-cloud-support-package.ts

@@ -6,7 +6,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-spinner";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-markdown-element";
 import "../../../../components/ha-md-dialog";
@@ -67,7 +67,7 @@ export class DialogSupportPackage extends LitElement {
               ></ha-markdown-element>`
             : html`
                 <div class="progress-container">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                   Generating preview...
                 </div>
               `}

src/panels/config/dashboard/ha-config-updates.ts

@@ -9,7 +9,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-alert";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list-item";
 import type { DeviceRegistryEntry } from "../../../data/device_registry";
@@ -103,14 +103,14 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                 )}
               ></state-badge>
               ${this.narrow && entity.attributes.in_progress
-                ? html`<ha-circular-progress
+                ? html`<ha-spinner
-                    indeterminate
                     slot="graphic"
                     class="absolute"
+                    size="small"
                     .ariaLabel=${this.hass.localize(
                       "ui.panel.config.updates.update_in_progress"
                     )}
-                  ></ha-circular-progress>`
+                  ></ha-spinner>`
                 : ""}
               <span
                 >${deviceEntry
@@ -125,14 +125,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
               </span>
               ${!this.narrow
                 ? entity.attributes.in_progress
-                  ? html`<ha-circular-progress
+                  ? html`<ha-spinner
-                      indeterminate
                       size="small"
                       slot="meta"
                       .ariaLabel=${this.hass.localize(
                         "ui.panel.config.updates.update_in_progress"
                       )}
-                    ></ha-circular-progress>`
+                    ></ha-spinner>`
                   : html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
             </ha-list-item>
@@ -190,10 +189,10 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
           cursor: pointer;
           font-size: 16px;
         }
-        ha-circular-progress.absolute {
+        ha-spinner.absolute {
           position: absolute;
-          width: 40px;
+          width: 28px;
-          height: 40px;
+          height: 28px;
         }
         state-badge.updating {
           opacity: 0.5;

src/panels/config/helpers/dialog-helper-detail.ts

@@ -6,7 +6,7 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-list-item";
 import "../../../components/ha-tooltip";
@@ -175,9 +175,7 @@ export class DialogHelperDetail extends LitElement {
             </mwc-button>`}
       `;
     } else if (this._loading || this._helperFlows === undefined) {
-      content = html`<ha-circular-progress
+      content = html`<ha-spinner></ha-spinner>`;
-        indeterminate
-      ></ha-circular-progress>`;
     } else {
       const items = this._filterHelpers(
         HELPERS,

src/panels/config/integrations/dialog-add-integration.ts

@@ -48,6 +48,7 @@ import { loadVirtualizer } from "../../../resources/virtualizer";
 import type { HomeAssistant } from "../../../types";
 import "./ha-domain-integrations";
 import "./ha-integration-list-item";
+import "../../../components/ha-spinner";
 import type { AddIntegrationDialogParams } from "./show-add-integration-dialog";
 import { showYamlIntegrationDialog } from "./show-add-integration-dialog";
 
@@ -468,7 +469,7 @@ class AddIntegrationDialog extends LitElement {
             </lit-virtualizer>
           </mwc-list>`
         : html`<div class="flex center">
-            <ha-circular-progress indeterminate></ha-circular-progress>
+            <ha-spinner></ha-spinner>
           </div>`} `;
   }
 
@@ -740,7 +741,7 @@ class AddIntegrationDialog extends LitElement {
         justify-content: center;
         align-items: center;
       }
-      ha-circular-progress {
+      ha-spinner {
         margin: 24px 0;
       }
       mwc-list {

src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts

@@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-list-item";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-qr-code";
@@ -80,7 +80,7 @@ class DialogMatterManageFabrics extends LitElement {
               )}
             </mwc-list>`
           : html`<div class="center">
-              <ha-circular-progress indeterminate></ha-circular-progress>
+              <ha-spinner></ha-spinner>
             </div>`}
       </ha-dialog>
     `;

src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts

@@ -4,7 +4,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-qr-code";
 import { domainToName } from "../../../../../data/integration";
@@ -99,7 +99,7 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
           : this._status === "started"
             ? html`
                 <div class="flex-container">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                   <div class="status">
                     <p>
                       <b>
@@ -230,7 +230,7 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
           text-align: center;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
         }

src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts

@@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-list-item";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { pingMatterNode } from "../../../../../data/matter";
@@ -92,7 +92,7 @@ class DialogMatterPingNode extends LitElement {
             : this._status === "started"
               ? html`
                   <div class="flex-container">
-                    <ha-circular-progress indeterminate></ha-circular-progress>
+                    <ha-spinner></ha-spinner>
                     <div class="status">
                       <p>
                         <b>
@@ -185,7 +185,7 @@ class DialogMatterPingNode extends LitElement {
           --mdc-list-side-padding: 0;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
         }

src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts

@@ -4,7 +4,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { interviewMatterNode } from "../../../../../data/matter";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -62,7 +62,7 @@ class DialogMatterReinterviewNode extends LitElement {
           : this._status === "started"
             ? html`
                 <div class="flex-container">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                   <div class="status">
                     <p>
                       <b>
@@ -178,7 +178,7 @@ class DialogMatterReinterviewNode extends LitElement {
           height: 48px;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
         }

src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-commissioning.ts

@@ -2,7 +2,7 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../../../../types";
 import { sharedStyles } from "./matter-add-device-shared-styles";
-import "../../../../../../components/ha-circular-progress";
+import "../../../../../../components/ha-spinner";
 
 @customElement("matter-add-device-commissioning")
 class MatterAddDeviceCommissioning extends LitElement {
@@ -11,10 +11,7 @@ class MatterAddDeviceCommissioning extends LitElement {
   render() {
     return html`
       <div class="content">
-        <ha-circular-progress
+        <ha-spinner size="medium"></ha-spinner>
-          size="medium"
-          indeterminate
-        ></ha-circular-progress>
         <p>
           ${this.hass.localize(
             "ui.dialogs.matter-add-device.commissioning.note"
@@ -33,7 +30,7 @@ class MatterAddDeviceCommissioning extends LitElement {
         flex-direction: column;
         text-align: center;
       }
-      ha-circular-progress {
+      ha-spinner {
         margin-bottom: 24px;
       }
     `,

src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../../../components/ha-circular-progress";
+import "../../../../../../components/ha-spinner";
 import {
   canCommissionMatterExternal,
   startExternalCommissioning,
@@ -23,10 +23,7 @@ class MatterAddDeviceNew extends LitElement {
     if (canCommissionMatterExternal(this.hass)) {
       return html`
         <div class="content">
-          <ha-circular-progress
+          <ha-spinner size="medium"></ha-spinner>
-            size="medium"
-            indeterminate
-          ></ha-circular-progress>
         </div>
       `;
     }

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-tooltip";
@@ -108,7 +108,7 @@ class DialogZHAReconfigureDevice extends LitElement {
         ${this._status === "started"
           ? html`
               <div class="flex-container">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
                 <div class="status">
                   <p>
                     <b>
@@ -452,7 +452,7 @@ class DialogZHAReconfigureDevice extends LitElement {
           height: 48px;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
           margin-inline-end: 20px;

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import type { ZHADevice } from "../../../../../data/zha";
 import { DEVICE_MESSAGE_TYPES, LOG_OUTPUT } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
@@ -89,10 +89,7 @@ class ZHAAddDevicesPage extends LitElement {
                     "ui.panel.config.zha.add_device_page.spinner"
                   )}
                 </h1>
-                <ha-circular-progress
+                <ha-spinner aria-label="Searching"></ha-spinner>
-                  indeterminate
-                  aria-label="Searching"
-                ></ha-circular-progress>
               `
             : html`
                 <div>
@@ -237,7 +234,7 @@ class ZHAAddDevicesPage extends LitElement {
         .error {
           color: var(--error-color);
         }
-        ha-circular-progress {
+        ha-spinner {
           margin: 20px;
         }
         .searching {

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -5,7 +5,7 @@ import { customElement, property, state, query } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
 import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
 import { addGroup, fetchGroupableDevices } from "../../../../../data/zha";
 import "../../../../../layouts/hass-subpage";
@@ -105,13 +105,12 @@ export class ZHAAddGroupPage extends LitElement {
               class="button"
             >
               ${this._processingAdd
-                ? html`<ha-circular-progress
+                ? html`<ha-spinner
-                    indeterminate
                     size="small"
                     .ariaLabel=${this.hass!.localize(
                       "ui.panel.config.zha.groups.creating_group"
                     )}
-                  ></ha-circular-progress>`
+                  ></ha-spinner>`
                 : ""}
               ${this.hass!.localize(
                 "ui.panel.config.zha.groups.create"

src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts

@@ -7,7 +7,7 @@ import type {
   DataTableColumnContainer,
   DataTableRowData,
 } from "../../../../../components/data-table/ha-data-table";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-code-editor";
 import type { ZHADevice } from "../../../../../data/zha";
 import { fetchDevices } from "../../../../../data/zha";
@@ -116,10 +116,7 @@ class ZHADeviceNeighbors extends LitElement {
     }
     return html`
       ${!this._devices
-        ? html`<ha-circular-progress
+        ? html`<ha-spinner size="large"></ha-spinner>`
-            size="large"
-            indeterminate
-          ></ha-circular-progress>`
         : html`<ha-data-table
             .hass=${this.hass}
             .columns=${this._columns(this.narrow)}

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -7,7 +7,7 @@ import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
 import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
 import "../../../../../components/ha-card";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-icon-button";
 import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
 import {
@@ -171,12 +171,11 @@ export class ZHAGroupPage extends LitElement {
                     class="button"
                   >
                     ${this._processingRemove
-                      ? html`<ha-circular-progress
+                      ? html`<ha-spinner
-                          indeterminate
                           .ariaLabel=${this.hass.localize(
                             "ui.panel.config.zha.groups.removing_members"
                           )}
-                        ></ha-circular-progress>`
+                        ></ha-spinner>`
                       : nothing}
                     ${this.hass!.localize(
                       "ui.panel.config.zha.groups.remove_members"
@@ -208,11 +207,10 @@ export class ZHAGroupPage extends LitElement {
               class="button"
             >
               ${this._processingAdd
-                ? html`<ha-circular-progress
+                ? html`<ha-spinner
-                    active
                     size="small"
                     aria-label="Saving"
-                  ></ha-circular-progress>`
+                  ></ha-spinner>`
                 : ""}
               ${this.hass!.localize(
                 "ui.panel.config.zha.groups.add_members"

src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts

@@ -4,7 +4,7 @@ import type { DeviceRegistryEntry } from "../../../../../../data/device_registry
 import type { HomeAssistant } from "../../../../../../types";
 import { invokeZWaveCCApi } from "../../../../../../data/zwave_js";
 import "../../../../../../components/ha-alert";
-import "../../../../../../components/ha-circular-progress";
+import "../../../../../../components/ha-spinner";
 import { extractApiErrorMessage } from "../../../../../../data/hassio/common";
 import "./zwave_js-capability-control-multilevel-switch";
 
@@ -41,7 +41,7 @@ class ZWaveJSCapabilityColorSwitch extends LitElement {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
     }
     if (!this._color_components) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
     return this._color_components.map(
       (color) =>

src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts

@@ -11,7 +11,7 @@ import "../../../../../../components/ha-list-item";
 import "../../../../../../components/ha-alert";
 import "../../../../../../components/ha-switch";
 import "../../../../../../components/ha-formfield";
-import "../../../../../../components/ha-circular-progress";
+import "../../../../../../components/ha-spinner";
 import type { HaSwitch } from "../../../../../../components/ha-switch";
 import type { HaProgressButton } from "../../../../../../components/buttons/ha-progress-button";
 import { extractApiErrorMessage } from "../../../../../../data/hassio/common";
@@ -100,7 +100,7 @@ class ZWaveJSCapabilityDoorLock extends LitElement {
       !this._capabilities ||
       this._currentDoorLockMode === undefined
     ) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-spinner></ha-spinner>`;
     }
 
     const isValid = this._isValid();

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -8,7 +8,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-alert";
 import type { HaCheckbox } from "../../../../../components/ha-checkbox";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-formfield";
@@ -146,14 +146,11 @@ class DialogZWaveJSAddNode extends LitElement {
       >
         ${this._status === "loading"
           ? html`<div style="display: flex; justify-content: center;">
-              <ha-circular-progress
+              <ha-spinner size="large"></ha-spinner>
-                size="large"
-                indeterminate
-              ></ha-circular-progress>
             </div>`
           : this._status === "waiting_for_device"
             ? html`<div class="flex-container">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
                 <p>
                   ${this.hass.localize(
                     "ui.panel.config.zwave_js.add_node.waiting_for_device"
@@ -338,9 +335,7 @@ class DialogZWaveJSAddNode extends LitElement {
                                 "ui.panel.config.zwave_js.add_node.searching_device"
                               )}
                             </h3>
-                            <ha-circular-progress
+                            <ha-spinner></ha-spinner>
-                              indeterminate
-                            ></ha-circular-progress>
                             <p>
                               ${this.hass.localize(
                                 "ui.panel.config.zwave_js.add_node.follow_device_instructions"
@@ -355,9 +350,7 @@ class DialogZWaveJSAddNode extends LitElement {
                                       "ui.panel.config.zwave_js.add_node.searching_device"
                                     )}
                                   </h2>
-                                  <ha-circular-progress
+                                  <ha-spinner></ha-spinner>
-                                    indeterminate
-                                  ></ha-circular-progress>
                                   <p>
                                     ${this.hass.localize(
                                       "ui.panel.config.zwave_js.add_node.follow_device_instructions"
@@ -409,9 +402,7 @@ class DialogZWaveJSAddNode extends LitElement {
                           : this._status === "interviewing"
                             ? html`
                                 <div class="flex-container">
-                                  <ha-circular-progress
+                                  <ha-spinner></ha-spinner>
-                                    indeterminate
-                                  ></ha-circular-progress>
                                   <div class="status">
                                     <p>
                                       <b
@@ -1004,7 +995,7 @@ class DialogZWaveJSAddNode extends LitElement {
           color: var(--secondary-text-color);
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
           margin-inline-end: 20px;

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts

@@ -4,7 +4,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
 import { computeDeviceName } from "../../../../../data/device_registry";
@@ -96,7 +96,7 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
         ${this._status === "started"
           ? html`
               <div class="flex-container">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
                 <div class="status">
                   <p>
                     ${this.hass.localize(
@@ -252,7 +252,7 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
         }
 
         .flex-container ha-svg-icon,
-        .flex-container ha-circular-progress {
+        .flex-container ha-spinner {
           margin-right: 20px;
           margin-inline-end: 20px;
           margin-inline-start: initial;

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts

@@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { reinterviewZwaveNode } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -69,7 +69,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
         ${this._status === "started"
           ? html`
               <div class="flex-container">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
                 <div class="status">
                   <p>
                     <b>
@@ -234,7 +234,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
           height: 48px;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
           margin-inline-end: 20px;

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts

@@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import type { ZWaveJSRemovedNode } from "../../../../../data/zwave_js";
 import { removeFailedZwaveNode } from "../../../../../data/zwave_js";
@@ -90,7 +90,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
         ${this._status === "started"
           ? html`
               <div class="flex-container">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
                 <div class="status">
                   <p>
                     <b>
@@ -216,7 +216,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
           height: 48px;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
           margin-inline-end: 20px;

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts

@@ -5,7 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-alert";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -82,7 +82,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
         ${this._status === "started"
           ? html`
               <div class="flex-container">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
                 <div class="status">
                   <p>
                     <b
@@ -249,7 +249,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
           height: 48px;
         }
 
-        .flex-container ha-circular-progress,
+        .flex-container ha-spinner,
         .flex-container ha-svg-icon {
           margin-right: 20px;
           margin-inline-end: 20px;

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -15,6 +15,7 @@ import { classMap } from "lit/directives/class-map";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-fab";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-svg-icon";
@@ -141,9 +142,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
                   <div class="heading">
                     <div class="icon">
                       ${this._status === "disconnected"
-                        ? html`<ha-circular-progress
+                        ? html`<ha-spinner></ha-spinner>`
-                            indeterminate
-                          ></ha-circular-progress>`
                         : html`
                             <ha-svg-icon
                               .path=${this._icon}
@@ -423,12 +422,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
                           @change=${this._dataCollectionToggled}
                         ></ha-switch>
                       `
-                    : html`
+                    : html` <ha-spinner size="small"></ha-spinner> `}
-                        <ha-circular-progress
-                          size="small"
-                          indeterminate
-                        ></ha-circular-progress>
-                      `}
                 </div>
                 <div class="card-content">
                   <p>

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts

@@ -4,7 +4,7 @@ import { mdiCloseCircle } from "@mdi/js";
 import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-select";
 import "../../../../../components/ha-button";
-import "../../../../../components/ha-circular-progress";
+import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-list-item";
 import type { HomeAssistant } from "../../../../../types";
 import {
@@ -91,9 +91,7 @@ class ZWaveJSCustomParam extends LitElement {
         </ha-select>
       </div>
       <div class="custom-config-buttons">
-        ${this._isLoading
+        ${this._isLoading ? html`<ha-spinner></ha-spinner>` : nothing}
-          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
-          : nothing}
         <ha-button @click=${this._getCustomConfigValue}>
           ${this.hass.localize(
             "ui.panel.config.zwave_js.node_config.get_value"

src/panels/config/logs/error-log-card.ts

@@ -34,7 +34,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-menu";
 import "../../../components/ha-md-menu-item";
@@ -284,9 +284,7 @@ class ErrorLogCard extends LitElement {
             <div id="scroll-top-marker"></div>
             ${this._loadingPrevState === "loading"
               ? html`<div class="loading-old">
-                  <ha-circular-progress
+                  <ha-spinner></ha-spinner>
-                    .indeterminate=${this._loadingPrevState === "loading"}
-                  ></ha-circular-progress>
                 </div>`
               : nothing}
             ${this._loadingState === "loading"

src/panels/config/logs/system-log-card.ts

@@ -9,7 +9,7 @@ import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import { getSignedPath } from "../../../data/auth";
@@ -102,7 +102,7 @@ export class SystemLogCard extends LitElement {
           ${this._items === undefined
             ? html`
                 <div class="loading-container">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                 </div>
               `
             : html`

src/panels/config/network/supervisor-hostname.ts

@@ -6,7 +6,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
@@ -70,8 +70,7 @@ export class HassioHostname extends LitElement {
         <div class="card-actions">
           <mwc-button @click=${this._save} .disabled=${this._processing}>
             ${this._processing
-              ? html`<ha-circular-progress indeterminate size="small">
+              ? html`<ha-spinner size="small"></ha-spinner>`
-                </ha-circular-progress>`
               : this.hass.localize("ui.common.save")}
           </mwc-button>
         </div>

src/panels/config/network/supervisor-network.ts

@@ -9,7 +9,7 @@ import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
@@ -146,8 +146,7 @@ export class HassioNetwork extends LitElement {
                   .disabled=${this._scanning}
                 >
                   ${this._scanning
-                    ? html`<ha-circular-progress indeterminate size="small">
+                    ? html`<ha-spinner size="small"> </ha-spinner>`
-                      </ha-circular-progress>`
                     : this.hass.localize(
                         "ui.panel.config.network.supervisor.scan_ap"
                       )}
@@ -263,8 +262,7 @@ export class HassioNetwork extends LitElement {
       <div class="card-actions">
         <ha-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
           ${this._processing
-            ? html`<ha-circular-progress indeterminate size="small">
+            ? html`<ha-spinner size="small"></ha-spinner>`
-              </ha-circular-progress>`
             : this.hass.localize("ui.common.save")}
         </ha-button>
         <ha-button @click=${this._clear}>

src/panels/config/repairs/dialog-system-information.ts

@@ -10,7 +10,7 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-metric";
 import type { HassioStats } from "../../../data/hassio/common";
@@ -295,7 +295,7 @@ class DialogSystemInformation extends LitElement {
     if (!this._systemInfo) {
       sections.push(html`
         <div class="loading-container">
-          <ha-circular-progress indeterminate></ha-circular-progress>
+          <ha-spinner></ha-spinner>
         </div>
       `);
     } else {
@@ -314,12 +314,7 @@ class DialogSystemInformation extends LitElement {
             const info = domainInfo.info[key] as SystemCheckValueObject;
 
             if (info.type === "pending") {
-              value = html`
+              value = html` <ha-spinner size="small"></ha-spinner> `;
-                <ha-circular-progress
-                  indeterminate
-                  size="small"
-                ></ha-circular-progress>
-              `;
             } else if (info.type === "failed") {
               value = html`
                 <span class="error">${info.error}</span>${!info.more_info

src/panels/config/storage/dialog-move-datadisk.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-select";
 import "../../../components/ha-dialog";
 import {
@@ -109,12 +109,7 @@ class MoveDatadiskDialog extends LitElement {
       >
         ${this._moving
           ? html`
-              <ha-circular-progress
+              <ha-spinner aria-label="Moving" size="large"> </ha-spinner>
-                aria-label="Moving"
-                size="large"
-                indeterminate
-              >
-              </ha-circular-progress>
               <p class="progress-text">
                 ${this.hass.localize(
                   "ui.panel.config.storage.datadisk.moving_desc"
@@ -207,7 +202,7 @@ class MoveDatadiskDialog extends LitElement {
         ha-select {
           width: 100%;
         }
-        ha-circular-progress {
+        ha-spinner {
           display: block;
           margin: 32px;
           text-align: center;

src/panels/config/users/dialog-add-user.ts

@@ -3,7 +3,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
@@ -194,7 +194,7 @@ export class DialogAddUser extends LitElement {
         ${this._loading
           ? html`
               <div slot="primaryAction" class="submit-spinner">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
               </div>
             `
           : html`

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-spinner";
 import "../../../../components/ha-expansion-panel";
 import type { PipelineRun } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
@@ -90,9 +90,7 @@ const renderProgress = (
     if ("error" in pipelineRun) {
       return html`❌`;
     }
-    return html`
+    return html` <ha-spinner size="small"></ha-spinner> `;
-      <ha-circular-progress size="small" indeterminate></ha-circular-progress>
-    `;
   }
 
   const duration =

src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts

@@ -6,7 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-icon-next";
@@ -129,7 +129,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
     let stats: TemplateResult;
 
     if (!this._stats5min || !this._statsHour) {
-      stats = html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      stats = html`<ha-spinner></ha-spinner>`;
     } else if (this._statsHour.length < 1 && this._stats5min.length < 1) {
       stats = html`<p>
         ${this.hass.localize(
@@ -526,7 +526,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
           display: flex;
           flex-direction: column;
         }
-        .stat-list ha-circular-progress {
+        .stat-list ha-spinner {
           margin: 0 auto;
         }
       `,

src/panels/developer-tools/statistics/dialog-statistics-fix.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-dialog";
 import { clearStatistics, getStatisticLabel } from "../../../data/recorder";
@@ -139,11 +139,10 @@ export class DialogStatisticsFix extends LitElement {
                 .disabled=${this._clearing}
               >
                 ${this._clearing
-                  ? html`<ha-circular-progress
+                  ? html`<ha-spinner
-                      indeterminate
                       size="small"
                       aria-label="Saving"
-                    ></ha-circular-progress>`
+                    ></ha-spinner>`
                   : nothing}
                 ${this.hass.localize("ui.common.delete")}
               </mwc-button>

src/panels/developer-tools/template/developer-tools-template.ts

@@ -6,7 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-alert";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import "../../../components/ha-code-editor";
 import "../../../components/ha-card";
 import type { RenderTemplateResult } from "../../../data/ws-templates";
@@ -168,11 +168,10 @@ class HaPanelDevTemplate extends LitElement {
         >
           <div class="card-content">
             ${this._rendering
-              ? html`<ha-circular-progress
+              ? html`<ha-spinner
                   class="render-spinner"
-                  indeterminate
                   size="small"
-                ></ha-circular-progress>`
+                ></ha-spinner>`
               : ""}
             ${this._error
               ? html`<ha-alert

src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts

@@ -6,7 +6,7 @@ import { componentsWithService } from "../../../common/config/components_with_se
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import type { CheckConfigResult } from "../../../data/core";
 import { checkCoreConfig } from "../../../data/core";
 import { domainToName } from "../../../data/integration";
@@ -94,7 +94,7 @@ export class DeveloperYamlConfig extends LitElement {
                 ? html`<div
                     class="validate-container layout vertical center-center"
                   >
-                    <ha-circular-progress indeterminate></ha-circular-progress>
+                    <ha-spinner></ha-spinner>
                   </div> `
                 : nothing
               : html`

src/panels/history/ha-panel-history.ts

@@ -27,7 +27,7 @@ import {
 import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
 import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-button-menu";
@@ -185,7 +185,7 @@ class HaPanelHistory extends LitElement {
           </div>
           ${this._isLoading
             ? html`<div class="progress-wrapper">
-                <ha-circular-progress indeterminate></ha-circular-progress>
+                <ha-spinner></ha-spinner>
               </div>`
             : !entitiesSelected
               ? html`<div class="start-search">

src/panels/logbook/ha-logbook-renderer.ts

@@ -14,7 +14,6 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
 import { computeTimelineColor } from "../../components/chart/timeline-color";
 import "../../components/entity/state-badge";
-import "../../components/ha-circular-progress";
 import "../../components/ha-icon-next";
 import "../../components/ha-relative-time";
 import type { LogbookEntry } from "../../data/logbook";

src/panels/logbook/ha-logbook.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { throttle } from "../../common/util/throttle";
-import "../../components/ha-circular-progress";
+import "../../components/ha-spinner";
 import type { LogbookEntry, LogbookStreamMessage } from "../../data/logbook";
 import { subscribeLogbook } from "../../data/logbook";
 import type { TraceContexts } from "../../data/trace";
@@ -103,7 +103,7 @@ export class HaLogbook extends LitElement {
     if (this._logbookEntries === undefined) {
       return html`
         <div class="progress-wrapper">
-          <ha-circular-progress indeterminate></ha-circular-progress>
+          <ha-spinner></ha-spinner>
         </div>
       `;
     }

src/panels/lovelace/cards/hui-starting-card.ts

@@ -5,7 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCard } from "../types";
@@ -39,7 +39,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
 
     return html`
       <div class="content">
-        <ha-circular-progress indeterminate></ha-circular-progress>
+        <ha-spinner></ha-spinner>
         ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
       </div>
     `;
@@ -50,7 +50,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
       display: block;
       height: calc(100vh - var(--header-height));
     }
-    ha-circular-progress {
+    ha-spinner {
       margin-bottom: 20px;
     }
     .content {

src/panels/lovelace/components/hui-image.ts

@@ -8,7 +8,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-camera-stream";
 import type { HaCameraStream } from "../../../components/ha-camera-stream";
-import "../../../components/ha-circular-progress";
+import "../../../components/ha-spinner";
 import type { CameraEntity } from "../../../data/camera";
 import { fetchThumbnailUrlWithCache } from "../../../data/camera";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -256,11 +256,7 @@ export class HuiImage extends LitElement {
                     : undefined,
                 })}
               >
-                <ha-circular-progress
+                <ha-spinner class="render-spinner" size="small"></ha-spinner>
-                  class="render-spinner"
-                  indeterminate
-                  size="small"
-                ></ha-circular-progress>
               </div>`
             : ""}
       </div>