Source code

src/showcase/pages/components/progress.html

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

Download source

<!--
Demonstrate the progress 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":"componentProgress"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('componentProgress')"></h2></header>
      <div class="card-body">
        <div class="demo-stack">
          <label class="form-label" for="catalog-progress">
            <span x-text="$t('galleryCapacity')"></span>
            <output x-text="progress + '%'"></output>
          </label>
          <input
            id="catalog-progress"
            class="form-range"
            type="range"
            min="0"
            max="100"
            x-model.number="progress"
          />
          <div
            class="progress"
            role="progressbar"
            :aria-label="$t('galleryCapacity')"
            :aria-valuenow="progress"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div class="progress-bar" :style="'width: ' + progress + '%'"></div>
          </div>
          <div
            class="progress"
            role="progressbar"
            :aria-label="$t('loading')"
            aria-valuenow="75"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar progress-bar-striped progress-bar-animated"
              style="width: 75%"
            ></div>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>