64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
value: number
|
|
max: number
|
|
color?: string
|
|
height?: number
|
|
animated?: boolean
|
|
variant?: 'gold' | 'purple'
|
|
}>(),
|
|
{
|
|
color: 'var(--gold)',
|
|
height: 10,
|
|
animated: true,
|
|
variant: 'gold',
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="progress-bar" :class="`progress-bar--${variant}`" :style="{ height: `${height}px` }">
|
|
<div
|
|
class="progress-bar__fill"
|
|
:class="{ 'progress-bar__fill--animated': animated }"
|
|
:style="{ width: `${Math.min(100, (value / max) * 100)}%`, background: color }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.progress-bar {
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.progress-bar__fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--gold), var(--gold-light));
|
|
box-shadow: 0 0 10px rgba(244, 174, 33, 0.45);
|
|
position: relative;
|
|
}
|
|
|
|
.progress-bar__fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.progress-bar--purple .progress-bar__fill {
|
|
background: linear-gradient(90deg, var(--purple), var(--purple-light));
|
|
box-shadow: 0 0 10px rgba(118, 55, 201, 0.4);
|
|
}
|
|
|
|
.progress-bar__fill--animated {
|
|
transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|