> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress Bar

> Progress.vue Component Documentation

The `Progress.vue` component is a reusable Vue.js component for displaying progress bars. It is designed to show the completion percentage of a task in a visually intuitive way.

***

## Features

<CardGroup cols={2}>
  <Card title="Dynamic Progress" icon="square-1">
    Displays progress based on the <code>value</code> prop.
  </Card>

  <Card title="Customizable Appearance" icon="square-2">
    Supports customization with classes and styles for a personalized look.
  </Card>

  <Card title="Accessible" icon="square-3">
    Includes ARIA attributes to enhance accessibility.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { Progress } from '@robojuice/velure-ui';
```

```vue theme={null}
<Progress value="90" />
```

### Intermediate Progress

```vue theme={null}
<Progress value="50" />
```

### Custom Height

```vue theme={null}
<Progress class="h-10" value="10" />
```

***

## Props

<ParamField path="value" type="number" default="0">
  The current progress value as a percentage (between 0 and 100).
</ParamField>

***

## Example Use Cases

### Showing Upload Progress

Use the `value` prop to display the progress of a file upload:

```vue theme={null}
<Progress :value="uploadProgress" />
```

### Custom Styling

Adjust the height of the progress bar using custom classes:

```vue theme={null}
<Progress class="h-10" :value="25" />
```

***

## Notes

* The `value` prop must be a number between `0` and `100`. Ensure the value is validated before passing it to the component.
* Use ARIA attributes provided by the component to enhance accessibility, especially for screen readers.
* The `class` attribute allows for additional styling, such as adjusting the height or color of the progress bar.

For further customization, refer to the component's source code.