Add support for exact % progress reports in options flow (#25082)

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

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

@@ -2,11 +2,13 @@ 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-progress-ring";
 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";
 import { configFlowContentStyles } from "./styles";
+import { blankBeforePercent } from "../../common/translations/blank_before_percent";
 
 @customElement("step-flow-progress")
 class StepFlowProgress extends LitElement {
@@ -19,13 +21,24 @@ class StepFlowProgress extends LitElement {
   @property({ attribute: false })
   public step!: DataEntryFlowStepProgress;
 
+  @property({ type: Number })
+  public progress?: number;
+
   protected render(): TemplateResult {
     return html`
       <h2>
         ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
       </h2>
       <div class="content">
-        <ha-spinner></ha-spinner>
+        ${this.progress
+          ? html`
+              <ha-progress-ring .value=${this.progress} size="large"
+                >${this.progress}${blankBeforePercent(
+                  this.hass.locale
+                )}%</ha-progress-ring
+              >
+            `
+          : html` <ha-spinner size="large"></ha-spinner> `}
         ${this.flowConfig.renderShowFormProgressDescription(
           this.hass,
           this.step