2022-02-19 00:18:01 -05:00
|
|
|
<template>
|
2022-02-19 00:39:14 -05:00
|
|
|
<div
|
|
|
|
v-if="width > 0"
|
2023-07-26 10:12:21 -04:00
|
|
|
class="progress-bar"
|
2022-02-19 00:39:14 -05:00
|
|
|
:style="{ width: width_percent }"
|
|
|
|
/>
|
2022-02-19 00:18:01 -05:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: 'ProgressBar',
|
|
|
|
props: ['max', 'value'],
|
|
|
|
|
|
|
|
computed: {
|
2022-02-19 00:39:14 -05:00
|
|
|
width() {
|
2022-02-19 00:18:01 -05:00
|
|
|
if (this.value > 0 && this.max > 0) {
|
2022-02-19 00:39:14 -05:00
|
|
|
return parseInt((this.value * 100) / this.max)
|
2022-02-19 00:18:01 -05:00
|
|
|
}
|
|
|
|
return 0
|
|
|
|
},
|
2022-02-19 00:39:14 -05:00
|
|
|
width_percent() {
|
2022-02-19 00:18:01 -05:00
|
|
|
return this.width + '%'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|