circular progress bar in vuejs

CircleProgress.vue

<script setup>
const props = defineProps({
    progress: {
      type: Number,
      default: 0,
    },
})
</script>
<template>   
        <svg  viewBox="-6.25 -6.25 62.5 62.5" version="1.1" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg)">
            <circle r="15.92" cx="25" cy="25" fill="transparent" stroke="#88888850" stroke-width="5" stroke-dasharray="100px" stroke-dashoffset="0"></circle>
            <circle r="15.92" cx="25" cy="25" stroke="currentcolor" stroke-width="5" stroke-linecap="butt" :stroke-dashoffset="100 - props.progress +'px'" fill="transparent" stroke-dasharray="100px"></circle>
        </svg>
</template>