@empathyco/x-components
Version:
Empathy X Components
61 lines (43 loc) • 1.84 kB
Markdown
---
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>
```