progress

Information

Folder
src/components/elements/progress

Files

Schema
Mocks
Template
// src/components/elements/progress/progress.html.twig

<div
  class="Progress js-Progress{%- if class %} {{ class }}{% endif -%}"
  data-limited-webform-page="{{ limited_webform_page }}"
  data-limited-webform="{{ limited_webform }}"
  data-counter-state-endpoint="{{ counter_state_endpoint }}"
  data-counter-rule-id="{{ counter_rule_id }}"
>
  <p class="Progress-percentage">
    <span class="Progress-percentageNumber u-typo-headline4">
      <span class="js-Progress-item--countPercentage">0</span>%
    </span>
    <span class="Progress-reachedTargetText u-typo-copy">vom Ziel erreicht</span>
  </p>
  <progress class="Progress-progressBar js-Progress-progressBar" value="0" max="100">0%</progress>
  <p class="Progress-current">
    <span class="u-typo-copy-bold js-Progress-item--countCurrent">0</span>
    <span class="u-typo-copy">Spender:innen</span>
  </p>
  <p class="Progress-target">
    <span class="Progress-targetNumber u-typo-copy-bold">
      <span class="js-Progress-item--countTarget">{{ counter_target }}</span> Spender:innen
    </span>
    <span class="Progress-targetText u-typo-copy">sind das Ziel</span>
  </p>
</div>

Variants

default
Open

default mock data

Raw
Resolved