bootstrap_italia-8.x-0.x-dev/templates/form/webform/webform-progress.html.twig

{#
/**
 * @file
 * Default theme implementation for webform wizard progress.
 * Docs: https://italia.github.io/bootstrap-italia/docs/componenti/steppers/
 * Latest revision: v2.0.8
 *
 * Available variables:
 * - webform: A webform.
 * - pages: Array of wizard pages.
 * - current_page: Current wizard page.
 * - index: Index of the current page.
 * - total: Total number of pages.
 * - summary: Summary of progress.
 * - percentage: Percentage completed.
 * - bar: A progress bar.
 *
 * @see template_preprocess_webform_progress()
 *
 * @ingroup themeable
 */
#}
{#{{ attach_library('webform/webform.progress') }}#}
{% apply spaceless %}
  <div class="steppers mb-5">

    {{ bar }}

    {% if summary or percentage %}
      <div class="steppers-progress d-lg-none d-xl-none d-xxl-none">
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: {{ percentage }}" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        {% if summary %}
          <span class="form-text" data-webform-progress-summary>{{ summary }}</span>
          {% if percentage %}
            <span class="form-text">(<span data-webform-progress-percentage>{{ percentage }}</span>)</span>
          {% endif %}
        {% else %}
          <span class="form-text" data-webform-progress-percentage>{{ percentage }}</span>
        {% endif %}
      </div>
    {% endif %}

  </div>
{% endapply %}