Progress

Progress displays an indicator showing the completion progress of a task.

Demo

progress.html

<div x-init x-progress data-valuemin="0" data-valuemax="100" data-valuenow="40" data-valuetext="40%">
  <div x-progress:indicator></div>
</div>

Features

• Provides context for assistive technology to read the progress of a task.

View Source (opens in new tab)

Anatomy

<div x-init x-progress>
  <div x-progress:indicator></div>
</div>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Directives

x-progress

Required

---

The root element for the progress bar.

x-progress:indicator

Required

---

Used to show the progress visually.