> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/indicators/progress.md).

# Progress

Use this component to show a determine progress: like file uploading, goal achievement or amount of viewed content. Different variants of Progress can be used in different scenarios. 

```tsx
import { Progress } from 'altrone-ui';

return <Progress value={25} max={100} />
```

## Variants

There are three variants of Progress:

**Default Progress.** Looks like a bar with the active segment displayed inside it.&#x20;

**Segmented Progress.** Looks like a row with small segments. Active segments filled with color. In **Altrone 1.1** and later you can change segment item component via `ProgressSegmentComponent` prop.&#x20;

**Circular Progress.** This variant looks like a circle with active segment. This variant is available only in **Altrone 1.2** and later.&#x20;

### <mark style="color:blue;">ProgressVariant</mark>

```typescript
enum ProgressVariant {
  default = 'default',
  segmented = 'segmented',
  circular = 'circular'
}
```

### <mark style="color:blue;">ProgressSegmentComponent</mark>

In **Altrone 1.1** and later you can use your own component for segments in `segmented` variant. To do that you have to pass your component which accepts following properties:

```typescript
interface ProgressSegmentProps {
  index: number;
  isActive: boolean;
}
```

## Properties

<table><thead><tr><th>Property</th><th width="239.66666666666666">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>value</code></strong><mark style="color:red;"><strong><code>*</code></strong></mark></td><td><code>number</code></td><td>Current value of the progress</td></tr><tr><td><strong><code>max</code></strong></td><td><code>number</code></td><td>Maximum value of the progress. Default value is <code>100</code>. </td></tr><tr><td><strong><code>variant</code></strong></td><td><a href="#progressvariant"><code>ProgressVariant</code></a></td><td>Variant of the progress. Default value is <code>default</code></td></tr><tr><td><strong><code>role</code></strong></td><td><a href="/pages/QlPeZC0sjrjLeC8hOsf2"><code>Role</code></a></td><td>Role of the progress</td></tr><tr><td><strong><code>size</code></strong></td><td><a href="/pages/xeGIec9mKoGdanAATrfT"><code>Size</code></a></td><td>Size of the progress</td></tr><tr><td><strong><code>ProgressSegmentComponent</code></strong></td><td><code>React.FC&#x3C;ProgressSegmentComponent></code></td><td>Custom segment component. Works only with <code>segmented</code> variant</td></tr><tr><td><strong><code>className</code></strong></td><td><code>string</code></td><td>Custom CSS class</td></tr></tbody></table>

## History

* **`Altrone 1.2`**:
  * added `circular` variant
* **`Altrone 1.1`**:
  * added `SegmentedItem` prop
* **`Altrone 1.0`**: initial release