title: How to create a circle progress inside a Vue component
body: <p>I'm creating a component in my application built with Vue. This componet is a countdown, ranging from <code>X</code> minutes to <code>00:00</code>.</p>
  
  <p>I know it's possible to animate <code>svg</code> to achieve the desired result, but I do not have the necessary knowledge. I have never used any <code>svg</code> library.</p>
  
  <p>I need to create the following animation in my progress component:</p>
  
  <p><a href="https://i.stack.imgur.com/G7AUZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7AUZ.png" alt="Progress bar animation sprites"></a></p>
  
  <p>The animation need to follow the path according to the weather in a smooth way. The path nodes should be inserted / updated based on time.</p>
  
  <p>This is my actual countdown component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
    el: '#app',
    data: {
      date: moment(2 * 60 * 1000)
    },
    computed: {
      time: function(){
        return this.date.format('mm:ss');
      }
    },
    mounted: function(){
     var timer = setInterval(() =&gt; {
        this.date = moment(this.date.subtract(1, 'seconds'));
          
        if(this.date.diff(moment(0)) === 0){
          clearInterval(timer);
          
          alert('Done!');
        }
      }, 1000);
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://momentjs.com/downloads/moment.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;{{ time }}&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the svg for the progress circle:</p>
  
  <pre><code>&lt;svg x="0px" y="0px" viewBox="0 0 90 90"&gt;
      &lt;style type="text/css"&gt;
          .st0{fill:#FFFFFF;}
          .st1{fill:none;stroke:#B5B5B5;stroke-miterlimit:10;}
          .st2{fill:none;stroke:#408EFF;stroke-linecap:round;stroke-miterlimit:10;}
          .st3{fill:#408EFF;}
      &lt;/style&gt;
      &lt;rect class="st0" width="90" height="90"/&gt;
      &lt;circle class="st1" cx="45" cy="45" r="40"/&gt;
      &lt;path class="st2" d="M45,5c22.1,0,40,17.9,40,40S67.1,85,45,85S5,67.1,5,45S22.9,5,45,5"/&gt;
      &lt;circle class="st3" cx="45" cy="5" r="3"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>How can I achieve the desired result?</p>
  
  <p>All help would be welcome.</p>