CircleProgressBar.vue

<template></template>

<script lang="ts">
import { computed, defineComponent, toRefs } from 'vue';

export default defineComponent({
  props: {
    progress: { type: Number, required: true }
  },
  setup(props) {
    const { progress } = toRefs(props);
    
    const strokeDashoffset = computed((): number => {
      return 100 - (100 - progress.value);
    })
    
    const background = computed((): string => {
      const angle = 360 * progress.value;
      return `radial-gradient(white 50%, transparent 51%),
        conic-gradient(transparent 0deg ${angle}deg, gainsboro ${angle}deg 360deg),
        conic-gradient(orange 0deg, yellow 90deg, lightgreen 180deg, green)`;
    })

    // Of course, adapt the code to the approach you choose
    return { strokeDashoffset, background };
  },
});
</script>

<style lang="scss" scoped>
#progress-circle {
  background: v-bind(background);
}

.circle-container__progress {
  stroke-dashoffset: v-bind(strokeDashoffset);
}
</style