Source code

src/showcase/pages/components/loading.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the loading states component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentLoading"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('componentLoading')"></h2></header>
      <div class="card-body">
        <div class="demo-stack">
          <div class="demo-row" role="status">
            <span class="spinner-border" aria-hidden="true"></span>
            <span class="spinner-border spinner-border-sm text-success" aria-hidden="true"></span>
            <span class="spinner-grow text-warning" aria-hidden="true"></span>
            <span x-text="$t('loading')"></span>
          </div>
          <div class="skeleton" aria-hidden="true"></div>
          <p class="placeholder-glow mb-0" aria-hidden="true">
            <span class="placeholder col-8"></span>
            <span class="placeholder col-5"></span>
          </p>
        </div>
      </div>
    </article>
  </div>
</section>