Progress

Native <progress> element. Automatic styling — no classes needed.

Default

<progress value="50" max="100" aria-label="50% complete"></progress>

Multiple Values

<progress value="25" max="100"></progress>
<progress value="70" max="100"></progress>

Indeterminate (Loading)

<!-- Omit value for indeterminate/loading state -->
<progress aria-label="Loading…"></progress>

JavaScript Control

const bar = document.querySelector('progress');
bar.value = 75; // Set percentage
bar.max = 100;  // Set scale

Accessibility

  • Always include aria-label or a visible <label>
  • Pair with a text percentage for sighted users: <progress> 75%</progress> pattern
  • Use aria-live="polite" on a nearby element to announce progress updates
  • Indeterminate state (no value) signals loading — pair with aria-busy="true" on the region

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Progress component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.