Progress Indicator

communication

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

Variants

Linear

Default

Horizontal bar progress indicator

Circular

Circular spinning progress indicator

Properties

Name Type Required Default Description
variant enum - linear Type of progress indicator
value number - - Current progress value (0 to max)
max number - 1 Maximum progress value
indeterminate boolean - - Show indeterminate progress animation
fourColor boolean - - Use four-color animation for indeterminate state
buffer number - - Buffer amount for linear progress (0 to max)

States

determinate

Shows specific progress amount

indeterminate

Shows ongoing activity without specific progress

Accessibility

Role: progressbar
Screen Reader Notes: Add aria-label describing what is loading. For determinate progress, include aria-valuenow, aria-valuemin (0), and aria-valuemax.

LLM Context

Intent: Communicate ongoing process status to users
Anti-Patterns:
  • Progress indicator without aria-label
  • Using determinate when progress is unknown
  • Progress at 100% without transitioning away
  • Multiple progress indicators for same process
Example Usage: 
<md-linear-progress indeterminate></md-linear-progress>
<md-linear-progress value="0.5"></md-linear-progress>
<md-circular-progress indeterminate></md-circular-progress>
<md-circular-progress value="0.75" aria-label="Loading"></md-circular-progress>
<md-linear-progress value="0.5" buffer="0.8" aria-label="Download progress"></md-linear-progress>