← →

Progress

Progress is a native web component that displays a horizontal progress bar. Use the `value` attribute (0 to 100) to show determinate progress, or add `indeterminate` for an animated state when the duration is unknown. Ideal for uploads, loading, and workflow steps.

Preview

<div style="display:flex;flex-direction:column;gap:1rem;max-width:24rem">
  <div>
    <p style="margin:0 0 .5rem">Uploading file (65%)</p>
    <pura-progress value="65"></pura-progress>
  </div>
  <div>
    <p style="margin:0 0 .5rem">Processing...</p>
    <pura-progress indeterminate></pura-progress>
  </div>
</div>

Attributes

Attribute	Type	Default	Description
`value`	number	0	Current progress from 0 to 100; out-of-range values are clamped.
`indeterminate`	boolean	false	When present, shows an indefinite progress animation and ignores value.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/progress.js"></script>

JavaScript

import "./pura/lib/progress.js";