chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_ui.html

<style include="common">
  paper-spinner-lite {
    --spinner-size: 38px;
    display: none;
    height: var(--spinner-size);
    margin-bottom: 28px;
    width: var(--spinner-size);
  }

  paper-spinner-lite[active] {
    display: inline-block;
  }

  .spinner-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
  }
</style>

<edu-coexistence-template>
  <span slot="main">
    <div class="back-button" hidden$="[[!showGaiaButtons]]">
      <edu-coexistence-button button-type="back"
         id="gaia-back-button"
         on-go-back="handleGaiaLoginGoBack">
      </edu-coexistence-button>
    </div>

    <webview id="signinFrame" hidden$="[[loading]]" class="signin-frame"
             allowscaling></webview>
    <div class ="spinner-container" hidden$="[[!loading]]">
      <paper-spinner-lite class="spinner" active="[[loading]]">
      </paper-spinner-lite>
      <div id="comment" aria-live="polite"
           aria-label="$i18n{loadingMessage}">
          $i18n{loadingMessage}
      </div>
    </div>
  </span>
  <span slot="buttons" hidden$="[[!showGaiaButtons]]" class="buttons-layout">
    <gaia-action-buttons id="gaiaNextButton"
      authenticator="[[controller.authenticator]]"
      rounded-button="true"
      hidden$="[[!showGaiaNextButton]]">
    </gaia-action-buttons>
  </span>
</edu-coexistence-template>