Progress segments

Data displaystable.segments

Progress segments

A short row of segments showing how many of a few discrete parts are done ("2 von 4 Sätzen").

Use segments when progress is counted in a few discrete units the athlete recognises: sets of an exercise, sessions of the week. Up to 10 segments; beyond that use a progress bar.

The whole strip is one image for assistive tech (role="img") with a label that states the numbers. By default the label is "{done} von {total} {unit} erledigt"; set unit ("Sätzen", "Trainings") or pass a complete label.

Show the same information as visible text nearby ("4×15 · 2 von 4"), since the segments alone are hard to count at a glance.

Examples

Sets of an exercise

Data
render({
  "done": 2,
  "total": 4
})
Markup
<div class="segments" role="img" aria-label="2 von 4 Sätzen erledigt"><span data-done></span><span data-done></span><span></span><span></span></div>

Sessions this week

Data
render({
  "done": 3,
  "total": 3,
  "unit": "Trainings"
})
Markup
<div class="segments" role="img" aria-label="3 von 3 Trainings erledigt"><span data-done></span><span data-done></span><span data-done></span></div>

Custom label

Data
render({
  "done": 1,
  "total": 5,
  "label": "Runde 2 von 5 läuft"
})
Markup
<div class="segments" role="img" aria-label="Runde 2 von 5 läuft"><span data-done></span><span></span><span></span><span></span><span></span></div>

Data contract

What render(data) accepts — validated against this JSON Schema in development and tests. Unknown fields are rejected. The same schema is in components.json.

FieldTypeRequiredDefaultDescription
doneintegerrequired—Completed parts (≤ total).
≥ 0
totalintegerrequired—Number of parts (max 10).
≥ 1 · ≤ 10
unitstringoptional"Sätzen"Noun in the dative plural used in the default label ("Sätzen", "Trainings", "Runden").
labelstringoptional—Full accessible label, overriding the default "{done} von {total} {unit} erledigt".
JSON Schema
{
  "type": "object",
  "additionalProperties": false,
  "required": [
    "done",
    "total"
  ],
  "properties": {
    "done": {
      "type": "integer",
      "minimum": 0,
      "description": "Completed parts (≤ `total`)."
    },
    "total": {
      "type": "integer",
      "minimum": 1,
      "maximum": 10,
      "description": "Number of parts (max 10)."
    },
    "unit": {
      "type": "string",
      "default": "Sätzen",
      "description": "Noun in the dative plural used in the default label (\"Sätzen\", \"Trainings\", \"Runden\")."
    },
    "label": {
      "type": "string",
      "description": "Full accessible label, overriding the default \"{done} von {total} {unit} erledigt\"."
    }
  }
}

Markup & states

Root: div.segments — usable without render() by writing the markup directly.

Attributes

AttributeValuesDefaultDescription
role="img" aria-labeltext—One accessible image with the numbers.

Parts

PartDescription
span / span[data-done]One 8 px pill per part: done ones --color-accent, open ones --color-surface-2 (design guide §9.7).

States

StateDescription
span[data-done]Completed part.

Accessibility

  • The strip is announced once with its label; individual segments are not separate items.
  • Done segments differ by fill and border, not hue alone; the label carries the exact count.

Guidance

DoPair with visible text when the exact number matters.
DoUse for the athlete's own progress.
Don'tDon't use more than 10 segments.
Don'tDon't use segments for percentages — use the progress ring or bar.

Related: Progress bar · Progress ring · Streak strip