こんな感じのプログレスバーを作りたいなと思ったら、
SVGでできたのでその備忘録。

f:id:wannabe-jellyfish:20200903162438g:plain

ソースはこんな感じ

<circle>を使うと円がかけるので、2つ重ねて、
1つをstroke-dasharrayとstrokeDashoffsetを使って円弧にしている感じ。

<template>
  <svg height="100%" width="100%" :viewBox="viewbox">
    <circle
      stroke="#BDBDBD"
      :stroke-width="stroke"
      fill="transparent"
      :r="normalizedRadius"
      :cx="radius"
      :cy="radius"
    />
    <circle
      stroke="#8c67ef"
      :stroke-dasharray="circumference + ' ' + circumference"
      :style="{ strokeDashoffset: strokeDashoffset }"
      :stroke-width="stroke"
      fill="transparent"
      :r="normalizedRadius"
      :cx="radius"
      :cy="radius"
    />
  </svg>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class CircleProgress extends Vue {
  // 円の半径
  @Prop({ default: 100 }) radius!: number;
  // プログレスの%。0~100で指定
  @Prop({ default: 10 }) progress!: number;
  // 円の太さ
  @Prop({ default: 5 }) stroke!: number;

  private get viewbox() {
    return `0 0 ${this.radius * 2} ${this.radius * 2}`;
  }
  private get normalizedRadius() {
    return this.radius - this.stroke * 2;
  }
  private get circumference() {
    return this.normalizedRadius * 2 * Math.PI;
  }

  private get strokeDashoffset() {
    return this.circumference - (this.progress / 100) * this.circumference;
  }
}
</script>

<style lang="scss" scoped>
circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
</style>