Usage

ProgressBar shows the completion ratio of an operation.

<script setup lang="ts">
import { ProgressBar } from '@astryx-vue/core/ProgressBar'
</script>

<template>
  <ProgressBar :value="60" label="Upload" show-value />
</template>

Best practices

Guidance	Practices
Do	Choose a color variant that matches the context: accent for general progress, success for completion, warning or error for alerts.
Don't	Place icons or labels inside the bar; compose them alongside it using layout components.
Don't	Use multiple progress bars stacked together for the same operation; use one bar with a value label instead.

Examples

Basic

Upload60%

Use value and max to control completion. show-value displays the percentage.

Sizes

Small

Medium

Large

Progress bars come in sm, md, and lg track heights.

Color variants

Neutral

Success

Warning

Error

Info

Use different colors to match the state.

Indeterminate

Loading...

Use isIndeterminate for loading states with unknown progress.

Accessibility

A progress bar has no focusable element, so screen reader users rely on the ARIA attributes the component exposes to learn the current progress. The component therefore puts role="progressbar" on the track and fills in the progress values and name, so assistive technologies can announce it accurately:

• The progress range is described by aria-valuemin and aria-valuemax, which the component sets automatically from min and max.
• The current progress is described by aria-valuenow, which is also set automatically.
• When label is provided, the label is linked to the track through aria-labelledby.
• When description is provided, the description is linked to the track through aria-describedby.

When isIndeterminate is true the progress is unknown, so the component removes aria-valuenow and screen readers announce the bar without a specific value.