Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Determinate Progress Bar

determinate-progress

Add to comparison +
Microinteractions & feedbackScope: State / detaildeterminate-progress · v0.1.0

Represent the actual completed proportion with a progress bar when both total work and completed work are known.

Interactive specimen · Fictional product FIELDNOTES

Import notes · Simulated task

0 / 5 notes · 0%

The percentage is calculated from simulated completed notes, not invented by a timer.

Recognizing it

  • An explicit task name
  • Measurable completed work and total work
  • A completed or failed end state

Concept boundary

The percentage must correspond to completed work. This specimen uses a manually advanced simulated task, not real network speed.

When to consider it

  • The system provides real completed-work and total-work values
  • People need to know how far a task has progressed

When to be cautious

  • Using a timer to invent percentages when progress is unknown
  • Treating upload completion as server-side processing completion

Tradeoff

Progress is more concrete, but the total and measurement method must be reliable across task stages.

Conditional rules · Editorial advice

When Real completed-work data is unavailableMustDo not display a fabricated determinate percentage.
When The task completesMustShow completion and explain the next step.

Query requirement:measurable_progress = true
Determinate progress requires reliable completed-work and total-work values.

Related entries

Skeleton Screen ↗Conditional alternative · Presenting a waiting state

Do not choose a definite percentage without reliable completed-work data.

Calm Technology ↗Works with · Progress requires no immediate response

Use a status presentation that does not interrupt the task.

Sources and what they support

Carbon · Progress bar ↗

Distinguishes determinate and indeterminate progress; the determinate form represents quantifiable progress.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "idle",
    "progress",
    "success",
    "error"
  ],
  "a11y": [
    "The progress indicator has an accessible name",
    "Use native progress; avoid announcing every percentage point"
  ],
  "motion": "Manual advancement, with no automatic animation"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.