Modrinth-plus/packages/ui/src/components/base/ProgressBar.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-[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>