<ion-content color="light">
  <ion-grid>
    <ion-row>
      <ion-col class="ion-text-center">
        <div style="padding-bottom: 32px">
          <img src="assets/img/logo.png" style="max-width: 240px" />
        </div>

        <ion-card color="dark">
          <ion-card-header>
            <ion-card-title style="font-size: 40px">Recovering</ion-card-title>
            <ion-card-subtitle
              >Progress: {{ (stateService.dataProgress * 100).toFixed(0)
              }}%</ion-card-subtitle
            >
          </ion-card-header>

          <ion-card-content class="ion-margin">
            <ion-progress-bar
              color="primary"
              style="
                max-width: 700px;
                margin: auto;
                padding-bottom: 20px;
                margin-bottom: 40px;
              "
              [value]="stateService.dataProgress"
            ></ion-progress-bar>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
