Echelon / Foundry Forma / Interface system
State & feedback

Survey progress

Determinate progress using the native progress element plus explicit current/total text.

Canonical sourcepatterns/survey-progress.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Survey progress Question 3 of 12
25%

Section 1 of 4 · Governance

View HTML 
<div class="ef-survey-progress">
  <div class="ef-survey-progress__header">
    <span class="ef-survey-progress__label" id="ex1-survey-progress-survey-progress-label">Survey progress</span>
    <span class="ef-survey-progress__value">Question 3 of 12</span>
  </div>
  <progress class="ef-survey-progress__bar" value="3" max="12" aria-labelledby="ex1-survey-progress-survey-progress-label">25%</progress>
  <p class="ef-survey-progress__context">Section 1 of 4 · Governance</p>
</div>
Example 2

Representative state

A browser-native state made visible without adding a runtime.

Survey progress Question 3 of 12
25%

Section 1 of 4 · Governance

View HTML 
<div class="ef-survey-progress">
  <div class="ef-survey-progress__header">
    <span class="ef-survey-progress__label" id="ex2-survey-progress-survey-progress-label">Survey progress</span>
    <span class="ef-survey-progress__value">Question 3 of 12</span>
  </div>
  <progress class="ef-survey-progress__bar" value="70" max="12" aria-labelledby="ex2-survey-progress-survey-progress-label">25%</progress>
  <p class="ef-survey-progress__context">Section 1 of 4 · Governance</p>
</div>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

Survey progress Question 3 of 12
25%

Section 1 of 4 · Governance

View HTML 
<div class="ef-survey-progress">
  <div class="ef-survey-progress__header">
    <span class="ef-survey-progress__label" id="ex3-survey-progress-survey-progress-label">Survey progress</span>
    <span class="ef-survey-progress__value">Question 3 of 12</span>
  </div>
  <progress class="ef-survey-progress__bar" value="3" max="12" aria-labelledby="ex3-survey-progress-survey-progress-label">25%</progress>
  <p class="ef-survey-progress__context">Section 1 of 4 · Governance</p>
</div>