---

title: AutoProgressBar

---

# AutoProgressBar

The auto progress bar component is useful for displaying a visual indicator of numerical data
in a bar shape.

## Props

| Name                           | Description                                      | Type                 | Default           |
| ------------------------------ | ------------------------------------------------ | -------------------- | ----------------- |
| <code>isLoading</code>         | A boolean flag indicating if the bar is loading. | <code>boolean</code> | <code>true</code> |
| <code>durationInSeconds</code> | The duration in seconds of the progress bar.     | <code>number</code>  | <code>5</code>    |

## Events

This component emits the following events:

- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
  after the user clicks the redirection button.
- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
  after the user clicks the abort redirection button.

## See it in action

Here you have a basic example of how the auto progress bar is rendered.

```vue live
<template>
  <AutoProgressBar
    :isLoading="isLoading"
    :durationInSeconds="durationInSeconds"
  />
</template>

<script setup>
import { AutoProgressBar } from "@empathyco/x-components";
const isLoading = true;
const durationInSeconds = 100;
</script>
```

### Play with props

In this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way
to cancel the animation by sending the isLoading prop to false.

```vue live
<template>
  <AutoProgressBar :durationInSeconds="5" :isLoading="true" />
</template>

<script setup>
import { AutoProgressBar } from "@empathyco/x-components";
</script>
```