Struct Progress 

pub struct Progress;

The <progress> element - represents the completion progress of a task.

Purpose

The <progress> element displays the progress of a task, such as a file upload, download, or form completion. Shows a progress bar indicating how much of the task has been completed. Can represent both determinate (known total) and indeterminate (unknown total) progress.

Content Categories

• Flow Content
• Phrasing Content
• Palpable Content

Permitted Content Model

• Phrasing content (fallback for browsers without progress support, but no <progress> descendants)

Common Use Cases

• File upload progress indicators
• Download progress displays
• Form completion tracking
• Multi-step process progress
• Loading indicators with known duration

Key Attributes

• value: Current progress value
• max: Maximum value (total amount of work, default: 1.0)

Example

<!-- Basic progress bar -->
<label for="file-progress">Uploading file:</label>
<progress id="file-progress" value="70" max="100">70%</progress>

<!-- Progress with percentage label -->
<p>
  Installation progress:
  <progress value="0.6" max="1.0">60%</progress>
  60%
</p>

<!-- Indeterminate progress (no value attribute) -->
<p>
  Loading...
  <progress max="100">Loading...</progress>
</p>

<!-- Progress updated via JavaScript -->
<progress id="dynamic-progress" value="0" max="100"></progress>
<script>
  let progress = 0;
  setInterval(() => {
    progress = Math.min(progress + 10, 100);
    document.getElementById('dynamic-progress').value = progress;
  }, 500);
</script>

<!-- Download progress -->
<p>
  Downloading: <span id="filename">document.pdf</span>
  <progress id="download" value="2.5" max="10">2.5 MB of 10 MB</progress>
  <span id="progress-text">2.5 MB of 10 MB</span>
</p>

<!-- Form completion indicator -->
<form>
  <p>Form completion: <progress value="3" max="5">Step 3 of 5</progress></p>
  <!-- Form fields here -->
</form>

<!-- Styled progress bar -->
<progress value="75" max="100" style="width: 300px; height: 30px;">
  75% complete
</progress>

Accessibility

• Provide text content as fallback for older browsers
• Use aria-label or nearby text to describe what’s progressing
• Update aria-valuenow, aria-valuemin, aria-valuemax for complex cases
• Announce progress updates to screen readers with aria-live regions
• Ensure progress bar has sufficient color contrast

WHATWG Specification

• 4.10.13 The progress element

Trait Implementations

impl HtmlElement for Progress

const TAG: &'static str = "progress"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: PhrasingContent> CanContain<T> for Progress

impl FlowContent for Progress

impl PalpableContent for Progress

impl PhrasingContent for Progress