chromium/ash/webui/common/resources/cellular_setup/setup_loading_page.html

<style include="iron-flex cr-hidden-style">
  #animationContainer {
    align-items: flex-end;
    display: flex;
    height: 216px;
    justify-content: center;
    margin-bottom: 54px;
  }

  #simDetectError,
  #simDetectErrorJelly {
    height: 100%;
    width: 100%;
  }

  #simDetectError {
    background-image: url(chrome://resources/ash/common/cellular_setup/sim_detect_error.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  @media(prefers-color-scheme: dark) {
    #simDetectError {
      background-image: url(chrome://resources/ash/common/cellular_setup/sim_detect_error_dark.svg);
    }
  }

  :host-context(body.jelly-enabled) #simDetectError {
    display: none;
  }

  :host-context(body:not(.jelly-enabled)) #simDetectErrorJelly {
    display: none;
  }

  #pageBody {
    height: 222px;
  }

  cros-lottie-renderer {
    height: 85%;
  }

  base-page {
    --base-page-message-height: 40px;
  }
</style>
<base-page title="[[loadingTitle]]" message="[[loadingMessage]]">
  <div slot="page-body" id="pageBody" class="layout vertical center-center">
    <iron-media-query query="(prefers-color-scheme: dark)"
        query-matches="{{isDarkModeActive_}}">
    </iron-media-query>
    <template is="dom-if" if="[[!isSimDetectError]]" restamp>
      <div id="animationContainer">
        <cros-lottie-renderer id="spinner"
            asset-url="chrome://resources/ash/common/cellular_setup/spinner.json"
            autoplay dynamic aria-hidden>
        </cros-lottie-renderer>
      </div>
    </template>
    <div id="simDetectError" hidden$="[[!isSimDetectError]]">
    </div>
    <iron-icon id="simDetectErrorJelly"
        icon="cellular-setup-illo:sim-detect-error"
        hidden$="[[!isSimDetectError]]">
    </iron-icon>
  </div>
</base-page>