20 lines
412 B
Vue
20 lines
412 B
Vue
|
<template>
|
||
|
|
<div class="h-2 w-full bg-[#0f0816] border border-[#4a3b5e]">
|
||
|
|
<div
|
||
|
|
class="h-full transition-all duration-500"
|
||
|
|
:style="{ width: `${Math.min(100, Math.max(0, progress))}%`, backgroundColor: color }"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
interface Props {
|
||
|
|
progress: number;
|
||
|
|
color?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
withDefaults(defineProps<Props>(), {
|
||
|
|
color: '#9fd75b'
|
||
|
|
});
|
||
|
|
</script>
|