@if (progress === null) {
  @switch (layout) {
    @case ('stepper') {
      <div class="d-flex a-i-center">
        <i
          class="icon-spin m-r-4 icon-16 fit-h-20"
          [c8yIcon]="'spinner'"
        ></i>
        <ng-content></ng-content>
      </div>
    }
    @case ('component') {
      <div class="spinner p-relative">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
    }
    @case ('application') {
      <div class="spinner-snake"></div>
    }
    @case ('inline') {
      <div class="d-flex a-i-center">
        <i
          class="icon-spin m-r-4"
          [c8yIcon]="'spinner'"
        ></i>
        @if (message) {
          <span>{{ message | translate }}</span>
        }
      </div>
    }
    @case ('page') {
      <div class="loading-bar active"></div>
    }
  }
}

@if (progress !== null) {
  <div class="progress progress-striped active">
    <div
      class="progress-bar"
      [style.width]="progress + '%'"
      [attr.aria-label]="progressLabel | translate"
      aria-valuemin="0"
      aria-valuemax="100"
      [attr.aria-valuenow]="progress"
      role="progressbar"
    ></div>
  </div>
}

@if (defaultLoadingMessage) {
  <p class="text-center">
    {{ defaultLoadingMessage | translate }}
  </p>
}