HyProgress

A linear progress bar that displays the completion status of a task.

Progress bars show either determinate progress (known percentage) or indeterminate progress (unknown duration). For indeterminate circular loading, use the Spinner component instead.

Key Features:

• Determinate mode with percentage display
• Indeterminate mode with animated indicator
• Three size variants (small, medium, large)
• Four status variants (default, success, warning, danger)
• Customizable via CSS custom properties
• SSR compatible

Accessibility Features:

• Uses role="progressbar" with proper ARIA attributes
• aria-valuenow, aria-valuemin, aria-valuemax for determinate
• aria-label for accessible name when label is not visible
• aria-labelledby links to visible label when show-value is true
• aria-busy indicates indeterminate state
• Warns in console when label attribute is missing
• High contrast mode support
• Respects prefers-reduced-motion

When to Use:

• File uploads/downloads with known progress
• Multi-step processes
• Form submission progress
• Any operation with measurable completion

When NOT to Use:

• Unknown duration operations (use Spinner or indeterminate mode)
• Page-level loading (consider Skeleton)
• Very short operations (no indicator needed)

Examples

Basic determinate progress

<hy-progress value="75" label="Upload progress"></hy-progress>

With visible percentage

<hy-progress value="50" label="Loading" show-value></hy-progress>

Indeterminate mode

<hy-progress indeterminate label="Processing"></hy-progress>

Different sizes

<hy-progress value="60" size="small" label="Progress"></hy-progress>
<hy-progress value="60" size="medium" label="Progress"></hy-progress>
<hy-progress value="60" size="large" label="Progress"></hy-progress>

Status variants

<hy-progress value="100" variant="success" label="Complete"></hy-progress>
<hy-progress value="80" variant="warning" label="Almost full"></hy-progress>
<hy-progress value="30" variant="danger" label="Low storage"></hy-progress>

Custom max value

<hy-progress value="3" max="5" label="Step 3 of 5" show-value></hy-progress>

Custom styling

<hy-progress
  value="70"
  label="Progress"
  style="--hy-progress-indicator-color: deeppink;"
></hy-progress>

Circular ring

<hy-progress shape="ring" value="70" label="Upload progress" show-value></hy-progress>

Methods

willUpdate()

Generate unique IDs after hydration to prevent SSR mismatches.

firstUpdated()

Warn developers if label is missing (accessibility requirement). Only runs on client in dev mode.