A progress circle Vue component powered by CSS conic gradient

ProgressCircle.vue

<template>
  <div class="h-full rounded-full w-full" :style="conicGradient"></div>
</template>

<script setup>
// Props
const props = defineProps({
  color: {
    type: String,
    default: '#000000'
  },
  progress: {
    type: Number,
    default: 0.5
  },
  width: {
    type: Number,
    default: 3.8
  }
})

// Conic gradient
// ----------
const conicGradient = computed(() => {
  return {
    background: `conic-gradient(${props.color} 0deg, ${props.color} ${props.progress * 360}deg, transparent ${props.progress * 360}deg)`,
    maskImage: `radial-gradient(transparent ${71 - props.width}%, white ${71 - props.width}%)`
  }
})
</script>