You've already forked AstralRinth
forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
34 lines
566 B
Vue
34 lines
566 B
Vue
<template>
|
|
<div class="progress-bar">
|
|
<div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
progress: {
|
|
type: Number,
|
|
required: true,
|
|
validator(value) {
|
|
return value >= 0 && value <= 100
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 0.5rem;
|
|
background-color: var(--color-button-bg);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar__fill {
|
|
height: 100%;
|
|
background-color: var(--color-brand);
|
|
transition: width 0.3s;
|
|
}
|
|
</style>
|