16766be82f
* Initial unzipping feature * Remove explicit backup provider naming from frontend * CF placeholder * Use regex for CF links * Lint * Add unzip warning for conflicting files, fix hydration error * Adjust conflict modal ui * Fix old queued ops sticking around, remove conflict warning * Add vscode "editor.detectIndentation": true
87 lines
1.5 KiB
Vue
87 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
progress: number
|
|
max?: number
|
|
color?: 'brand' | 'green' | 'red' | 'orange' | 'blue' | 'purple' | 'gray'
|
|
waiting?: boolean
|
|
}>(),
|
|
{
|
|
max: 1,
|
|
color: 'brand',
|
|
waiting: false,
|
|
},
|
|
)
|
|
|
|
const colors = {
|
|
brand: {
|
|
fg: 'bg-brand',
|
|
bg: 'bg-brand-highlight',
|
|
},
|
|
green: {
|
|
fg: 'bg-green',
|
|
bg: 'bg-bg-green',
|
|
},
|
|
red: {
|
|
fg: 'bg-red',
|
|
bg: 'bg-bg-red',
|
|
},
|
|
orange: {
|
|
fg: 'bg-orange',
|
|
bg: 'bg-bg-orange',
|
|
},
|
|
blue: {
|
|
fg: 'bg-blue',
|
|
bg: 'bg-bg-blue',
|
|
},
|
|
purple: {
|
|
fg: 'bg-purple',
|
|
bg: 'bg-bg-purple',
|
|
},
|
|
gray: {
|
|
fg: 'bg-gray',
|
|
bg: 'bg-bg-gray',
|
|
},
|
|
}
|
|
|
|
const percent = computed(() => props.progress / props.max)
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="flex w-full max-w-[15rem] h-1 rounded-full overflow-hidden"
|
|
:class="colors[props.color].bg"
|
|
>
|
|
<div
|
|
class="rounded-full progress-bar"
|
|
:class="[colors[props.color].fg, { 'progress-bar--waiting': waiting }]"
|
|
:style="!waiting ? { width: `${percent * 100}%` } : {}"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.progress-bar {
|
|
transition: width 0.2s ease-in-out;
|
|
}
|
|
|
|
.progress-bar--waiting {
|
|
animation: progress-bar-waiting 1s linear infinite;
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes progress-bar-waiting {
|
|
0% {
|
|
left: -50%;
|
|
width: 20%;
|
|
}
|
|
50% {
|
|
width: 60%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
width: 20%;
|
|
}
|
|
}
|
|
</style>
|