Progress

Overview

Progress indicators communicate the completion status of a task, upload, download, or other long-running operation. MiniKit styles the native <progress> element, providing a consistent appearance while preserving browser accessibility and semantics.

Basic Usage

Specify the current progress using the value and max attributes.

<progress value="40" max="100"></progress>

Progress Values

The progress bar automatically fills based on the ratio between value and max.

<div class="vstack">
  <progress value="25" max="100"></progress>
  <progress value="50" max="100"></progress>
  <progress value="75" max="100"></progress>
  <progress value="100" max="100"></progress>
</div>

Update the value attribute dynamically to reflect progress as an operation completes.

Accessibility

MiniKit styles the native <progress> element, preserving browser accessibility and assistive technology support.

• Provide descriptive text explaining the current operation.
• Specify both value and max for determinate progress.
• Omit value when progress cannot be determined.
• Announce completion using nearby text rather than relying only on the progress bar.

API