svg gauge.vue

<template>
  <div class="relative">
    <svg :width="radius * 2" :height="radius * 2">
      <circle
        :cx="radius"
        :cy="radius"
        :r="innerRadius"
        :stroke-width="strokeWidth"
        :stroke-dasharray="dashArray"
        :transform="transform"
        fill="transparent"
        stroke-linecap="round"
      />
      <circle
        :cx="radius"
        :cy="radius"
        :r="innerRadius"
        :stroke-width="strokeWidth"
        :stroke-dasharray="dashArray"
        :transform="transform"
        :stroke-dashoffset="offset"
        fill="transparent"
        stroke-linecap="round"
      />
    </svg>
    <div class="percent"><span>{{ percent }}%</span></div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  percent: number
}>()

const radius = 20
const strokeWidth = radius * 0.2
const innerRadius = radius - (strokeWidth / 2)
const circumference = Math.round(innerRadius * 2 * Math.PI)
const arc = Math.round(circumference * 0.75)
const dashArray = `${arc} ${circumference}`
const transform = `rotate(135, ${radius}, ${radius})`
const offset = arc - (props.percent / 100) * arc
</script>

<style lang="scss" scoped>
svg {
  circle {
    @apply stroke-zinc-200;

    &:last-child {
      @apply stroke-brand-500;
    }
  }
}
.percent {
  @apply absolute inset-0 flex items-center justify-center text-brand-500 font-bold text-xs;
}
</style>