---
metaTitle: Progress component | AwesCode UI
meta:
  - name: description
    content: The <AwProgress /> component is used to render Progress bar - UI Vue component for AwesCode UI.
title: Progress
---

# Progress

**Category:** Atom | **Import:** Global

The `AwProgress` component displays an animated progress bar with customizable color.

## Overview

`AwProgress` provides a horizontal progress bar that animates smoothly when the progress value changes. It supports reading initial value from URL query parameters and custom colors.

## Usage

### Basic Example

```markup
<AwProgress :progress="75" />
```

### With Custom Color

```markup
<AwProgress :progress="50" color="success" />
```

### With Initial Value from URL

```markup
<!-- URL: /page?prev_progress=30 -->
<AwProgress :progress="75" prev-value-param="prev_progress" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| progress | Progress value (0-100) | `Number` | `false` | `0` |
| prevValueParam | URL query parameter name for initial value | `String` | `false` | `'prev_progress'` |
| color | Progress bar color - see [Built-in Colors](/reference/colors) | `String` | `false` | `'accent'` |

### Slots

No slots are available for this component.

### Events

No events are emitted by this component.

## Component Behavior

### Progress Value

- Progress value is automatically clamped between 0 and 100
- Values below 0 are treated as 0
- Values above 100 are treated as 100
- The progress ratio is calculated as `value / 100` with 4 decimal precision

### Animation

The component uses anime.js for smooth progress animations:
- **Duration:** 1000ms (1 second)
- **Easing:** easeOutCirc - Creates a smooth deceleration effect
- **Trigger:** Automatically animates when `progress` prop changes
- **Initial animation:** Runs on component mount

### Initial Value from URL

The component can read an initial progress value from URL query parameters:
- **Parameter name:** Configurable via `prevValueParam` prop (default: `prev_progress`)
- **Use case:** Preserving progress state across page navigation
- **Example:** URL `/page?prev_progress=30` will start at 30% and animate to the `progress` prop value

### Color System

- Uses CSS custom property `--color` for the progress bar fill
- Color is converted using the `toColor` utility function
- Supports all semantic colors (accent, success, info, warning, error)
- Supports mono scale and custom colors
- Default color is `accent`

### CSS Variables

The component sets two CSS custom properties:
- `--progress` - The progress ratio (0.0000 to 1.0000)
- `--color` - The progress bar fill color

### Structure

```
<div class="aw-progress" :style="{
  --progress: progressRatio,
  --color: fgColor
}"></div>
```

The actual progress bar styling is handled by CSS using these custom properties.

## Related Components

- `AwButton` - Button component that may show loading/progress
- `AwUploader` - Upload component that uses progress

## Notes

- **Import Method:** Global - Available as atom component
- Progress value is clamped between 0 and 100
- Animation duration is 1000ms with easeOutCirc easing
- Initial value can be read from URL query parameters
- Color supports theme color names (e.g., 'accent', 'success')