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>

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;
         }
       `,