37 lines
781 B
Vue
37 lines
781 B
Vue
|
<template>
|
||
|
|
<div class="flex items-center w-48 h-full">
|
||
|
|
<div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
|
||
|
|
<div
|
||
|
|
:style="{ width: value + '%' }"
|
||
|
|
class="h-full rounded-full"
|
||
|
|
:class="color"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "ProgressBar",
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
validator: (v) => v >= 0 && v <= 100,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: "Progress",
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: "bg-blue-500",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
|
||
|
|
</style>
|
||
|
|
|