<script setup lang="ts">

const props = defineProps<{
  total: number
  done: number
  open: number
}>()

const done = 100 * props.done / props.total
const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done
console.log(done, notDone)

</script>

<template>
  <span class="relative w-full h-2 bg-gray-300">
    <span v-if="notDone !== done"
          class="absolute bg-orange-500 h-full"
          :style="{width: `${notDone}%`}"
    ></span>
    <span v-if="done > 0"
          class="absolute bg-green-500 h-full"
          :style="{width: `${done}%`}"
    ></span>
  </span>
</template>

<style lang="scss" scoped></style>
