web/src/components/circleProgress/index.vue

<template>
  <div
    class="circle-progress"
    :style="{'width': width, 'height': height}">
    <svg viewBox="0 0 104 104">
      <path
        d="M 52 52 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
        class="circle-progress__track">
      </path>
      <path
        d="M 52 52 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
        class="circle-progress__path"
        :style="{'stroke-dashoffset': (1-percent)*299.08+'px'}">
      </path>
    </svg>
    <span class="circle-progress__perent">{{ formattedPercent }}%</span>
    <span class="circle-progress__text">{{ used }}{{ suffixe }}/{{ max }}{{ suffixe }}</span>
    <span class="circle-progress__title">{{ title }}</span>
  </div>
</template>
<script>
export default {
  props: {
    percent: Number,
    used: String,
    max: String,
    suffixe: String,
    title: String,
    width: String,
    height: String,
  },
  computed: {
    formattedPercent() {
      return (this.percent * 100).toFixed(0);
    },
  },
};
</script>
<style lang="scss" src="./index.scss">

</style>