assembly/components/common/ProgressBar.vue
Georges KABBOUCHI 6f362361e3 wip
2021-07-27 21:54:59 +03:00

38 lines
1.2 KiB
Vue

<template>
<div class="relative overflow-hidden rounded-[5px] border border-primary-gray border-opacity-[0.15]">
<div class="w-full h-2 bg-white"></div>
<div
class="absolute inset-0 transition-transform duration-200 ease-out"
:style="{ transform }"
:class="{
'bg-red-800': color === 'red-dark',
'bg-red-pure': color === 'red',
'bg-passion-orange-pure': color === 'passion-orange',
'bg-orange-pure': color === 'orange',
'bg-yellow-pure': color === 'yellow',
'bg-green-pure': color === 'green-pure',
'bg-ocean-blue-pure': color === 'ocean-blue',
'bg-grey-pure': color === 'grey',
}"
></div>
</div>
</template>
<script>
import { computed, defineComponent } from '@nuxtjs/composition-api'
import { useBigNumber } from '~/composables/useBigNumber'
export default defineComponent({
props: {
// Range: 0.0 - 1.0
progress: { type: String, default: '0' },
color: { type: String, default: 'ocean-blue' },
},
setup(props) {
const { min, minus, times } = useBigNumber()
const transform = computed(() => `translateX(-${minus('100', times(min(props.progress, 1), '100')).toFixed()}%)`)
return { transform }
},
})
</script>