Add ha circular progress (#6205)

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -10,6 +9,7 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
@@ -49,7 +49,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html` <paper-spinner-lite active></paper-spinner-lite> `
+              ? html`<ha-circular-progress active></ha-circular-progress>`
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -12,6 +11,7 @@ import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
+import "../../../../src/components/ha-circular-progress";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";
@@ -24,7 +24,7 @@ class HassioAddonConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
     return html`
       <div class="content">

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -14,6 +13,7 @@ import {
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import "../../../../src/layouts/loading-screen";
+import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -35,7 +35,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
     return html`
       <div class="content">

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

@@ -4,7 +4,6 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -20,6 +19,7 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/components/ha-circular-progress";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -56,7 +56,7 @@ class HassioAddonDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
     const addonTabs: PageNavigation[] = [

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -9,6 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -24,7 +24,7 @@ class HassioAddonInfoDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
     return html`

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -9,6 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -22,7 +22,7 @@ class HassioAddonLogDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html` <ha-circular-progress active></ha-circular-progress> `;
     }
     return html`
       <div class="content">

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

@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../src/components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -108,7 +108,7 @@ class HassioRepositoriesDialog extends LitElement {
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._prosessing
-                ? html`<paper-spinner active></paper-spinner>`
+                ? html`<ha-circular-progress active></ha-circular-progress>`
                 : "Add"}
             </mwc-button>
           </div>

package.json

@@ -26,6 +26,7 @@
     "@fullcalendar/core": "^5.0.0-beta.2",
     "@fullcalendar/daygrid": "^5.0.0-beta.2",
     "@material/chips": "7.0.0-canary.d92d8c93e.0",
+    "@material/circular-progress": "7.0.0-canary.d92d8c93e.0",
     "@material/mwc-button": "^0.15.0",
     "@material/mwc-checkbox": "^0.15.0",
     "@material/mwc-dialog": "^0.15.0",
@@ -64,7 +65,6 @@
     "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-ripple": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
-    "@polymer/paper-spinner": "^3.0.2",
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.0.1",
     "@polymer/paper-toast": "^3.0.1",

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -51,7 +51,9 @@ class HaProgressButton extends PolymerElement {
           <slot></slot>
         </mwc-button>
         <template is="dom-if" if="[[progress]]">
-          <div class="progress"><paper-spinner active=""></paper-spinner></div>
+          <div class="progress">
+            <ha-circular-progress active size="small"></ha-circular-progress>
+          </div>
         </template>
       </div>
     `;

src/components/ha-circular-progress.ts

@@ -0,0 +1,85 @@
+import {
+  LitElement,
+  TemplateResult,
+  property,
+  svg,
+  html,
+  customElement,
+  unsafeCSS,
+  SVGTemplateResult,
+} from "lit-element";
+// @ts-ignore
+import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css";
+import { classMap } from "lit-html/directives/class-map";
+
+@customElement("ha-circular-progress")
+export class HaCircularProgress extends LitElement {
+  @property({ type: Boolean })
+  public active = false;
+
+  @property()
+  public alt = "Loading";
+
+  @property()
+  public size: "small" | "medium" | "large" = "medium";
+
+  protected render(): TemplateResult | void {
+    let indeterminatePart: SVGTemplateResult;
+
+    if (this.size === "small") {
+      indeterminatePart = svg`
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
+        </svg>`;
+    } else if (this.size === "large") {
+      indeterminatePart = svg`
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
+        </svg>`;
+    } else {
+      // medium
+      indeterminatePart = svg`
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
+        </svg>`;
+    }
+
+    // ignoring prettier as it will introduce unwanted whitespace
+    // We have not implemented the determinate support of mdc circular progress.
+    // prettier-ignore
+    return html`
+      <div
+        class="mdc-circular-progress ${classMap({
+          "mdc-circular-progress--indeterminate": this.active,
+          [`mdc-circular-progress--${this.size}`]: true,
+        })}"
+        role="progressbar"
+        aria-label=${this.alt}
+        aria-valuemin="0"
+        aria-valuemax="1"
+      >
+        <div class="mdc-circular-progress__indeterminate-container">
+          <div class="mdc-circular-progress__spinner-layer">
+            <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
+              ${indeterminatePart}
+            </div><div class="mdc-circular-progress__gap-patch">
+              ${indeterminatePart}
+            </div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
+              ${indeterminatePart}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return unsafeCSS(progressStyles);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-circular-progress": HaCircularProgress;
+  }
+}

src/components/state-history-charts.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-spinner/paper-spinner";
+import "./ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -10,6 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-circular-progress";
 import "../../components/ha-switch";
 import "../../components/ha-formfield";
 import type { HaSwitch } from "../../components/ha-switch";
@@ -75,7 +76,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
           ${this._loading
             ? html`
                 <div class="init-spinner">
-                  <paper-spinner-lite active></paper-spinner-lite>
+                  <ha-circular-progress active></ha-circular-progress>
                 </div>
               `
             : html`

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

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -76,7 +76,7 @@ class StepFlowForm extends LitElement {
         ${this._loading
           ? html`
               <div class="submit-spinner">
-                <paper-spinner active></paper-spinner>
+                <ha-circular-progress active></ha-circular-progress>
               </div>
             `
           : html`

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -8,6 +7,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import "../../components/ha-circular-progress";
 
 @customElement("step-flow-loading")
 class StepFlowLoading extends LitElement {
@@ -17,7 +17,7 @@ class StepFlowLoading extends LitElement {
     return html`
       <div class="init-spinner">
         ${this.label ? html` <div>${this.label}</div> ` : ""}
-        <paper-spinner-lite active></paper-spinner-lite>
+        <ha-circular-progress active></ha-circular-progress>
       </div>
     `;
   }
@@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement {
         padding: 50px 100px;
         text-align: center;
       }
-      paper-spinner-lite {
+      ha-circular-progress {
         margin-top: 16px;
       }
     `;

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -1,6 +1,5 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import Fuse from "fuse.js";
 import {
   css,

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

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -38,7 +38,7 @@ class MoreInfoConfigurator extends PolymerElement {
           height: 41px;
         }
 
-        paper-spinner {
+        ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
@@ -75,11 +75,11 @@ class MoreInfoConfigurator extends PolymerElement {
               disabled="[[isConfiguring]]"
               on-click="submitClicked"
             >
-              <paper-spinner
+              <ha-circular-progress
                 active="[[isConfiguring]]"
                 hidden="[[!isConfiguring]]"
                 alt="Configuring"
-              ></paper-spinner>
+              ></ha-circular-progress>
               [[stateObj.attributes.submit_caption]]
             </mwc-button>
           </p>

src/layouts/ha-init-page.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import { css, CSSResult, html, LitElement, property } from "lit-element";
 import { removeInitSkeleton } from "../util/init-skeleton";
+import "../components/ha-circular-progress";
 
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
@@ -28,7 +28,7 @@ class HaInitPage extends LitElement {
                 : ""}
             `
           : html`
-              <paper-spinner-lite active></paper-spinner-lite>
+              <ha-circular-progress active></ha-circular-progress>
               <p>Loading data</p>
             `}
       </div>
@@ -52,7 +52,7 @@ class HaInitPage extends LitElement {
         justify-content: center;
         align-items: center;
       }
-      paper-spinner-lite {
+      ha-circular-progress {
         margin-top: 9px;
       }
       a {

src/layouts/hass-loading-screen.ts

@@ -1,5 +1,4 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResultArray,
@@ -9,6 +8,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import "../components/ha-circular-progress";
 import "../components/ha-menu-button";
 import "../components/ha-icon-button-arrow-prev";
 import { haStyle } from "../resources/styles";
@@ -39,7 +39,7 @@ class HassLoadingScreen extends LitElement {
             `}
       </app-toolbar>
       <div class="content">
-        <paper-spinner-lite active></paper-spinner-lite>
+        <ha-circular-progress active></ha-circular-progress>
       </div>
     `;
   }

src/layouts/hass-router-page.ts

@@ -147,6 +147,8 @@ export class HassRouterPage extends UpdatingElement {
       ? routeOptions.load()
       : Promise.resolve();
 
+    let showLoadingScreenTimeout: undefined | number;
+
     // Check when loading the page source failed.
     loadProm.catch((err) => {
       // eslint-disable-next-line
@@ -158,7 +160,13 @@ export class HassRouterPage extends UpdatingElement {
       }
 
       // Removes either loading screen or the panel
-      this.removeChild(this.lastChild!);
+      if (this.lastChild) {
+        this.removeChild(this.lastChild!);
+      }
+
+      if (showLoadingScreenTimeout) {
+        clearTimeout(showLoadingScreenTimeout);
+      }
 
       // Show error screen
       const errorEl = document.createElement("hass-error-screen");
@@ -177,7 +185,7 @@ export class HassRouterPage extends UpdatingElement {
     // That way we won't have a double fast flash on fast connections.
     let created = false;
 
-    setTimeout(() => {
+    showLoadingScreenTimeout = window.setTimeout(() => {
       if (created || this._currentPage !== newPage) {
         return;
       }

src/layouts/loading-screen.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -7,11 +6,12 @@ import {
   LitElement,
   TemplateResult,
 } from "lit-element";
+import "../components/ha-circular-progress";
 
 @customElement("loading-screen")
 class LoadingScreen extends LitElement {
   protected render(): TemplateResult {
-    return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    return html` <ha-circular-progress active></ha-circular-progress> `;
   }
 
   static get styles(): CSSResult {

src/panels/config/automation/thingtalk/dialog-thingtalk.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -132,10 +132,10 @@ class DialogThingtalk extends LitElement {
             Skip
           </mwc-button>
           <mwc-button @click="${this._generate}" .disabled=${this._submitting}>
-            <paper-spinner
+            <ha-circular-progress
               ?active="${this._submitting}"
               alt="Creating your automation..."
-            ></paper-spinner>
+            ></ha-circular-progress>
             Create automation
           </mwc-button>
         </div>
@@ -245,15 +245,15 @@ class DialogThingtalk extends LitElement {
         mwc-button.left {
           margin-right: auto;
         }
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
         }
-        paper-spinner {
+        ha-circular-progress {
           display: none;
         }
-        paper-spinner[active] {
+        ha-circular-progress[active] {
           display: block;
         }
         .error {

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

@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../components/ha-circular-progress";
 import { html, LitElement, property, PropertyValues } from "lit-element";
 import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
@@ -119,7 +119,7 @@ export class CloudWebhooks extends LitElement {
           ${this._progress.includes(entry.webhook_id)
             ? html`
                 <div class="progress">
-                  <paper-spinner active></paper-spinner>
+                  <ha-circular-progress active></ha-circular-progress>
                 </div>
               `
             : this._cloudHooks![entry.webhook_id]

src/panels/config/ha-entity-config.js

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -65,7 +65,10 @@ class HaEntityConfig extends PolymerElement {
                 </template>
 
                 <template is="dom-if" if="[[computeShowSpinner(formState)]]">
-                  <paper-spinner active="" alt="[[formState]]"></paper-spinner>
+                  <ha-circular-progress
+                    active=""
+                    alt="[[formState]]"
+                  ></ha-circular-progress>
                   [[formState]]
                 </template>
               </div>

src/panels/config/info/system-health-card.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -46,7 +46,7 @@ class SystemHealthCard extends LitElement {
       sections.push(
         html`
           <div class="loading-container">
-            <paper-spinner active></paper-spinner>
+            <ha-circular-progress active></ha-circular-progress>
           </div>
         `
       );

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "../../../../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -97,7 +97,10 @@ class ZHAAddDevicesPage extends LitElement {
                     "ui.panel.config.zha.add_device_page.spinner"
                   )}
                 </h1>
-                <paper-spinner active alt="Searching"></paper-spinner>
+                <ha-circular-progress
+                  active
+                  alt="Searching"
+                ></ha-circular-progress>
               `
             : html`
                 <div>
@@ -226,7 +229,7 @@ class ZHAAddDevicesPage extends LitElement {
         .error {
           color: var(--google-red-500);
         }
-        paper-spinner {
+        ha-circular-progress {
           padding: 20px;
         }
         .searching {

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

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -104,12 +104,12 @@ export class ZHAAddGroupPage extends LitElement {
               @click="${this._createGroup}"
               class="button"
             >
-              <paper-spinner
+              <ha-circular-progress
                 ?active="${this._processingAdd}"
                 alt="${this.hass!.localize(
                   "ui.panel.config.zha.groups.creating_group"
                 )}"
-              ></paper-spinner>
+              ></ha-circular-progress>
               ${this.hass!.localize(
                 "ui.panel.config.zha.groups.create"
               )}</mwc-button
@@ -171,15 +171,15 @@ export class ZHAAddGroupPage extends LitElement {
         ha-config-section *:last-child {
           padding-bottom: 24px;
         }
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
         }
-        paper-spinner {
+        ha-circular-progress {
           display: none;
         }
-        paper-spinner[active] {
+        ha-circular-progress[active] {
           display: block;
         }
         .paper-dialog-buttons {

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "../../../../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -166,12 +166,12 @@ export class ZHAGroupPage extends LitElement {
                     @click="${this._removeMembersFromGroup}"
                     class="button"
                   >
-                    <paper-spinner
+                    <ha-circular-progress
                       ?active="${this._processingRemove}"
                       alt=${this.hass.localize(
                         "ui.panel.config.zha.groups.removing_members"
                       )}
-                    ></paper-spinner>
+                    ></ha-circular-progress>
                     ${this.hass!.localize(
                       "ui.panel.config.zha.groups.remove_members"
                     )}</mwc-button
@@ -201,12 +201,12 @@ export class ZHAGroupPage extends LitElement {
               @click="${this._addMembersToGroup}"
               class="button"
             >
-              <paper-spinner
+              <ha-circular-progress
                 ?active="${this._processingAdd}"
                 alt=${this.hass.localize(
                   "ui.panel.config.zha.groups.adding_members"
                 )}
-              ></paper-spinner>
+              ></ha-circular-progress>
               ${this.hass!.localize(
                 "ui.panel.config.zha.groups.add_members"
               )}</mwc-button
@@ -309,15 +309,15 @@ export class ZHAGroupPage extends LitElement {
           text-decoration: none;
         }
 
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
         }
-        paper-spinner {
+        ha-circular-progress {
           display: none;
         }
-        paper-spinner[active] {
+        ha-circular-progress[active] {
           display: block;
         }
         .paper-dialog-buttons {

src/panels/config/integrations/integration-panels/zwave/zwave-network.ts

@@ -1,5 +1,5 @@
 import "../../../../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../../../components/ha-circular-progress";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -92,7 +92,7 @@ export class ZwaveNetwork extends LitElement {
                       `
                     : this._networkStatus.state === ZWAVE_NETWORK_STATE_STARTED
                     ? html`
-                        <paper-spinner active></paper-spinner>
+                        <ha-circular-progress active></ha-circular-progress>
                         ${this.hass!.localize(
                           "ui.panel.config.zwave.network_status.network_starting"
                         )}<br />

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

@@ -1,7 +1,7 @@
 import "../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -47,7 +47,7 @@ export class SystemLogCard extends LitElement {
           ${this._items === undefined
             ? html`
                 <div class="loading-container">
-                  <paper-spinner active></paper-spinner>
+                  <ha-circular-progress active></ha-circular-progress>
                 </div>
               `
             : html`

src/panels/config/server_control/ha-config-server-control.ts

@@ -112,7 +112,11 @@ export class HaConfigServerControl extends LitElement {
                                   )}
                                 </mwc-button>
                               `
-                            : html` <paper-spinner active></paper-spinner> `}
+                            : html`
+                                <ha-circular-progress
+                                  active
+                                ></ha-circular-progress>
+                              `}
                         </div>
                       `
                     : html`

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -138,7 +138,7 @@ export class DialogAddUser extends LitElement {
         ${this._loading
           ? html`
               <div slot="primaryAction" class="submit-spinner">
-                <paper-spinner active></paper-spinner>
+                <ha-circular-progress active></ha-circular-progress>
               </div>
             `
           : html`

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

@@ -1,4 +1,4 @@
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -92,10 +92,11 @@ class HaPanelDevTemplate extends LocalizeMixin(PolymerElement) {
         </div>
 
         <div class="render-pane">
-          <paper-spinner
+          <ha-circular-progress
             class="render-spinner"
             active="[[rendering]]"
-          ></paper-spinner>
+            size="small"
+          ></ha-circular-progress>
           <pre class$="[[computeRenderedClasses(error)]]">[[processed]]</pre>
         </div>
       </div>

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

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../types";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-date-range-picker";
 import { fetchDate, computeHistory } from "../../data/history";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 
 class HaPanelHistory extends LitElement {
   @property() hass!: HomeAssistant;
@@ -73,10 +73,10 @@ class HaPanelHistory extends LitElement {
             ></ha-date-range-picker>
           </div>
           ${this._isLoading
-            ? html`<paper-spinner
+            ? html`<ha-circular-progress
                 active
                 alt=${this.hass.localize("ui.common.loading")}
-              ></paper-spinner>`
+              ></ha-circular-progress>`
             : html`
                 <state-history-charts
                   .hass=${this.hass}
@@ -190,7 +190,7 @@ class HaPanelHistory extends LitElement {
         .content {
           padding: 0 16px 16px;
         }
-        paper-spinner {
+        ha-circular-progress {
           position: absolute;
           left: 50%;
           top: 50%;

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

@@ -2,7 +2,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-menu-button";
@@ -105,10 +105,10 @@ export class HaPanelLogbook extends LitElement {
         </div>
 
         ${this._isLoading
-          ? html`<paper-spinner
+          ? html`<ha-circular-progress
               active
               alt=${this.hass.localize("ui.common.loading")}
-            ></paper-spinner>`
+            ></ha-circular-progress>`
           : html`<ha-logbook
               .hass=${this.hass}
               .entries=${this._entries}
@@ -239,7 +239,7 @@ export class HaPanelLogbook extends LitElement {
           margin-right: 0;
         }
 
-        paper-spinner {
+        ha-circular-progress {
           position: absolute;
           left: 50%;
           top: 50%;

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

@@ -10,10 +10,10 @@ import {
   PropertyValues,
 } from "lit-element";
 import "../../../components/ha-card";
+import "../../../components/ha-circular-progress";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
 
@@ -47,7 +47,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
 
     return html`
       <div class="content">
-        <paper-spinner-lite active></paper-spinner-lite>
+        <ha-circular-progress active></ha-circular-progress>
         ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
       </div>
     `;
@@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
         display: block;
         height: calc(100vh - 64px);
       }
-      paper-spinner-lite {
+      ha-circular-progress {
         padding-bottom: 20px;
       }
       .content {

src/panels/lovelace/editor/card-editor/hui-card-editor.ts

@@ -140,11 +140,11 @@ export class HuiCardEditor extends LitElement {
               <div class="gui-editor">
                 ${this._loading
                   ? html`
-                      <paper-spinner
+                      <ha-circular-progress
                         active
                         alt="Loading"
                         class="center margin-bot"
-                      ></paper-spinner>
+                      ></ha-circular-progress>
                     `
                   : this._configElement}
               </div>
@@ -303,7 +303,7 @@ export class HuiCardEditor extends LitElement {
       .warning {
         color: #ffa726;
       }
-      paper-spinner {
+      ha-circular-progress {
         display: block;
         margin: auto;
       }

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -210,7 +210,7 @@ export class HuiCardPicker extends LitElement {
         this._renderCardElement(card),
         html`
           <div class="card spinner">
-            <paper-spinner active alt="Loading"></paper-spinner>
+            <ha-circular-progress active alt="Loading"></ha-circular-progress>
           </div>
         `
       )}`,

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -17,6 +17,7 @@ import type {
   LovelaceViewConfig,
 } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
+import "../../../../components/ha-circular-progress";
 import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import { addCard, replaceCard } from "../config-util";
@@ -167,10 +168,10 @@ export class HuiDialogEditCard extends LitElement {
                     ></hui-card-preview>
                     ${this._error
                       ? html`
-                          <paper-spinner
+                          <ha-circular-progress
                             active
                             alt="Can't update card"
-                          ></paper-spinner>
+                          ></ha-circular-progress>
                         `
                       : ``}
                   </div>
@@ -205,7 +206,10 @@ export class HuiDialogEditCard extends LitElement {
                 >
                   ${this._saving
                     ? html`
-                        <paper-spinner active alt="Saving"></paper-spinner>
+                        <ha-circular-progress
+                          active
+                          alt="Saving"
+                        ></ha-circular-progress>
                       `
                     : this.hass!.localize("ui.common.save")}
                 </mwc-button>
@@ -286,7 +290,7 @@ export class HuiDialogEditCard extends LitElement {
           }
         }
 
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
@@ -303,7 +307,7 @@ export class HuiDialogEditCard extends LitElement {
         .element-preview {
           position: relative;
         }
-        .element-preview paper-spinner {
+        .element-preview ha-circular-progress {
           top: 50%;
           left: 50%;
           position: absolute;

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -111,7 +111,10 @@ export class HuiDialogSuggestCard extends LitElement {
                 <mwc-button ?disabled="${this._saving}" @click="${this._save}">
                   ${this._saving
                     ? html`
-                        <paper-spinner active alt="Saving"></paper-spinner>
+                        <ha-circular-progress
+                          active
+                          alt="Saving"
+                        ></ha-circular-progress>
                       `
                     : this.hass!.localize(
                         "ui.panel.lovelace.editor.suggest_card.add"
@@ -143,7 +146,7 @@ export class HuiDialogSuggestCard extends LitElement {
         ha-paper-dialog {
           max-width: 845px;
         }
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
@@ -118,10 +118,10 @@ export class HuiSaveConfig extends LitElement {
                   ?disabled="${this._saving}"
                   @click="${this._saveConfig}"
                 >
-                  <paper-spinner
+                  <ha-circular-progress
                     ?active="${this._saving}"
                     alt="Saving"
-                  ></paper-spinner>
+                  ></ha-circular-progress>
                   ${this.hass!.localize(
                     "ui.panel.lovelace.editor.save_config.save"
                   )}
@@ -195,13 +195,13 @@ export class HuiSaveConfig extends LitElement {
         ha-paper-dialog {
           max-width: 650px;
         }
-        paper-spinner {
+        ha-circular-progress {
           display: none;
         }
-        paper-spinner[active] {
+        ha-circular-progress[active] {
           display: block;
         }
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-spinner/paper-spinner";
 import {
   css,
   CSSResult,
@@ -11,6 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../../../components/dialog/ha-paper-dialog";
+import "../../../../components/ha-circular-progress";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import type { LovelaceConfig } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -75,10 +75,10 @@ export class HuiDialogEditLovelace extends LitElement {
             ?disabled="${!this._config || this._saving}"
             @click="${this._save}"
           >
-            <paper-spinner
+            <ha-circular-progress
               ?active="${this._saving}"
               alt="Saving"
-            ></paper-spinner>
+            ></ha-circular-progress>
             ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
@@ -148,15 +148,15 @@ export class HuiDialogEditLovelace extends LitElement {
         ha-paper-dialog {
           max-width: 650px;
         }
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
         }
-        paper-spinner {
+        ha-circular-progress {
           display: none;
         }
-        paper-spinner[active] {
+        ha-circular-progress[active] {
           display: block;
         }
       `,

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -1,7 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import {
@@ -16,6 +15,7 @@ import {
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/dialog/ha-paper-dialog";
+import "../../../../components/ha-circular-progress";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import type {
   LovelaceBadgeConfig,
@@ -199,10 +199,10 @@ export class HuiDialogEditView extends LitElement {
             ?disabled="${!this._config || this._saving}"
             @click="${this._save}"
           >
-            <paper-spinner
+            <ha-circular-progress
               ?active="${this._saving}"
               alt="Saving"
-            ></paper-spinner>
+            ></ha-circular-progress>
             ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
@@ -369,7 +369,7 @@ export class HuiDialogEditView extends LitElement {
           text-transform: uppercase;
           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
-        mwc-button paper-spinner {
+        mwc-button ha-circular-progress {
           width: 14px;
           height: 14px;
           margin-right: 20px;
@@ -377,10 +377,10 @@ export class HuiDialogEditView extends LitElement {
         mwc-button.warning {
           margin-right: auto;
         }
-        paper-spinner {
+        ha-circular-progress {
           display: none;
         }
-        paper-spinner[active] {
+        ha-circular-progress[active] {
           display: block;
         }
         paper-dialog-scrollable {

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-spinner/paper-spinner";
+import "../../../components/ha-circular-progress";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -74,7 +74,7 @@ export class HuiGraphHeaderFooter extends LitElement
     if (!this._coordinates) {
       return html`
         <div class="container">
-          <paper-spinner active></paper-spinner>
+          <ha-circular-progress active></ha-circular-progress>
         </div>
       `;
     }
@@ -164,7 +164,7 @@ export class HuiGraphHeaderFooter extends LitElement
 
   static get styles(): CSSResult {
     return css`
-      paper-spinner {
+      ha-circular-progress {
         position: absolute;
         top: calc(50% - 28px);
       }

src/panels/lovelace/hui-editor.ts

@@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "../../components/ha-icon-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import { safeDump, safeLoad } from "js-yaml";
 import {
   css,

src/panels/mailbox/ha-dialog-show-audio-message.js

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -54,7 +54,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
           [[localize('ui.panel.mailbox.playback_title')]]
           <div class="icon">
             <template is="dom-if" if="[[_loading]]">
-              <paper-spinner active></paper-spinner>
+              <ha-circular-progress active></ha-circular-progress>
             </template>
             <ha-icon-button
               id="delicon"

src/panels/profile/ha-change-password-card.js

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -71,7 +71,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
           </div>
           <div class="card-actions">
             <template is="dom-if" if="[[_loading]]">
-              <div><paper-spinner active></paper-spinner></div>
+              <div><ha-circular-progress active></ha-circular-progress></div>
             </template>
             <template is="dom-if" if="[[!_loading]]">
               <mwc-button on-click="_changePassword"

src/panels/profile/ha-mfa-module-setup-flow.js

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-circular-progress";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -70,7 +70,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
           </template>
           <template is="dom-if" if="[[!_step]]">
             <div class="init-spinner">
-              <paper-spinner active></paper-spinner>
+              <ha-circular-progress active></ha-circular-progress>
             </div>
           </template>
           <template is="dom-if" if="[[_step]]">
@@ -125,7 +125,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
           <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
             <template is="dom-if" if="[[_loading]]">
               <div class="submit-spinner">
-                <paper-spinner active></paper-spinner>
+                <ha-circular-progress active></ha-circular-progress>
               </div>
             </template>
             <template is="dom-if" if="[[!_loading]]">

src/resources/ha-style.ts

@@ -60,12 +60,6 @@ documentContainer.innerHTML = `<custom-style>
       --paper-grey-200: #eeeeee;  /* for ha-date-picker-style */
       --paper-grey-500: #9e9e9e;  /* --label-badge-grey */
 
-      /* for paper-spinner */
-      --google-red-500: #db4437;
-      --google-blue-500: #4285f4;
-      --google-green-500: #0f9d58;
-      --google-yellow-500: #f4b400;
-
       /* for paper-slider */
       --paper-green-400: #66bb6a;
       --paper-blue-400: #42a5f5;

yarn.lock

@@ -1394,6 +1394,18 @@
     "@material/typography" "7.0.0-canary.d92d8c93e.0"
     tslib "^1.9.3"
 
+"@material/circular-progress@7.0.0-canary.d92d8c93e.0":
+  version "7.0.0-canary.d92d8c93e.0"
+  resolved "https://registry.yarnpkg.com/@material/circular-progress/-/circular-progress-7.0.0-canary.d92d8c93e.0.tgz#f644c90076cdf30208201dfb37e0d7c8f2c58724"
+  integrity sha512-Xoj6E+HtvxesuRo/u8xLqDQ0rJY9DKXOelKErrOkxJskkS4G30jFRvdlDWXenBjzRaynH/Iu3RcnNOUTrcSL4A==
+  dependencies:
+    "@material/animation" "7.0.0-canary.d92d8c93e.0"
+    "@material/base" "7.0.0-canary.d92d8c93e.0"
+    "@material/feature-targeting" "7.0.0-canary.d92d8c93e.0"
+    "@material/progress-indicator" "7.0.0-canary.d92d8c93e.0"
+    "@material/theme" "7.0.0-canary.d92d8c93e.0"
+    tslib "^1.9.3"
+
 "@material/density@7.0.0-canary.d92d8c93e.0", "@material/density@=7.0.0-canary.d92d8c93e.0":
   version "7.0.0-canary.d92d8c93e.0"
   resolved "https://registry.yarnpkg.com/@material/density/-/density-7.0.0-canary.d92d8c93e.0.tgz#a7a3b0a4fdb4ce92487611a18af4bf51b8f7b09f"
@@ -1692,6 +1704,13 @@
     lit-element "^2.3.0"
     tslib "^1.10.0"
 
+"@material/progress-indicator@7.0.0-canary.d92d8c93e.0":
+  version "7.0.0-canary.d92d8c93e.0"
+  resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-7.0.0-canary.d92d8c93e.0.tgz#e49e3d22ed594f53624eae5c8b82b19fa13e93d8"
+  integrity sha512-ibwqKAKd8xJqN2SceGo7fsjwdy7E2yjmP8V3ASUqUnK+MXepKoxdjfj+pXBAuCwNy8ehx1b4HzYq7LA20PKWKw==
+  dependencies:
+    tslib "^1.9.3"
+
 "@material/radio@=7.0.0-canary.d92d8c93e.0":
   version "7.0.0-canary.d92d8c93e.0"
   resolved "https://registry.yarnpkg.com/@material/radio/-/radio-7.0.0-canary.d92d8c93e.0.tgz#bf112f224cc3f3d64021e2ba45def87203dfc3fe"
@@ -2249,14 +2268,6 @@
     "@polymer/paper-styles" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-spinner@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-spinner/-/paper-spinner-3.0.2.tgz#c857c79f0494bc74e9ae293839d00f37fcf29f78"
-  integrity sha512-XUzu8/4NH+pnNZUTI2MxtOKFAr0EOsW7eGhTg3VBhTh7DDW/q3ewzwYRWnqNJokX9BEnxKMiXXaIeTEBq4k2dw==
-  dependencies:
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-styles@^3.0.0-pre.26", "@polymer/paper-styles@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/paper-styles/-/paper-styles-3.0.1.tgz#bd4962b83ab8432cd1cf197bb5222d3a08f135e1"