Progress

Progress

A progress bar component for displaying completion status.

Basic Usage

Default Progress

Basic progress bar with value.

<ae-progress value="60"></ae-progress>

Different Values

Progress Values

Show various completion states.

<div class="demo-column">
<ae-progress value="0"></ae-progress>
<ae-progress value="25"></ae-progress>
<ae-progress value="50"></ae-progress>
<ae-progress value="75"></ae-progress>
<ae-progress value="100"></ae-progress>
</div>

With Label

Show Label

Display percentage label.

<div class="demo-column">
<ae-progress value="45" show-label></ae-progress>
<ae-progress value="80" show-label></ae-progress>
</div>

Sizes

Progress Sizes

Small, medium, and large sizes.

<div class="demo-column">
<ae-progress value="60" size="sm"></ae-progress>
<ae-progress value="60" size="md"></ae-progress>
<ae-progress value="60" size="lg"></ae-progress>
</div>

Indeterminate

Indeterminate Progress

Use for unknown duration operations.

<ae-progress indeterminate></ae-progress>

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

Import

import { defineAeProgress } from '@aetherui-kit/core/progress';
defineAeProgress();

Props

Name	Type	Default	Description
value	number	0	Progress value (0-100)
max	number	100	Maximum value
size	'sm' | 'md' | 'lg'	'md'	Size variant
show-label	boolean	false	Show percentage label
indeterminate	boolean	false	Indeterminate mode

CSS Parts

Name	Description
base	Base wrapper
track	Background track
bar	Progress bar
label	Percentage label

Accessibility

• Uses role="progressbar"
• Sets aria-valuenow, aria-valuemin, aria-valuemax
• Screen reader announces progress updates