Animated circle path using custom properties

by jorgeluis

HTML

<div id="app">

  <svg :width="size" :height="size" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(-90deg);">
    <g>
      <title>Layer 1</title>
      <circle :style="style" id="circle" class="animated-path" :r="radius" :cy="size/2" :cx="size/2" :stroke-width="stroke" stroke="#c00" fill="none" />
    </g>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>Layer 1</title>
      <circle :style="style" id="circle" class="animated-path" :r="radius" :cy="size/2" :cx="size/2" :stroke-width="stroke" stroke="#c00" fill="none" />
    </g>
  </svg>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#circle {
  transition: stroke-dashoffset 1s linear;
}

Vue

new Vue({
  el: '#app',
  data: {
    perc: 70,
    radius: 70,
    stroke: 2
  },
  computed: {
    size() {
      return this.radius * 2 + this.stroke
    },
    perimeter() {
      return Math.round(Math.PI * this.radius * 2)
    },
    style() {
      return {
        'stroke-dashoffset': this.perimeter - this.perc / 100 * this.perimeter,
        'stroke-dasharray': this.perimeter,
      }
    }
  }
})