@empathyco/x-components
Version:
Empathy X Components
74 lines (56 loc) • 2.03 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>
import { AutoProgressBar } from '@empathyco/x-components'
export default {
name: 'AutoProgressBarDemo',
components: {
AutoProgressBar,
},
data() {
return {
isLoading: true,
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>
import { AutoProgressBar } from '@empathyco/x-components'
export default {
name: 'AutoProgressBarDemo',
components: {
AutoProgressBar,
},
}
</script>
```