Guide on implementing a circular progress bar within a Vue component

Question

Guide on implementing a circular progress bar within a Vue component

I am currently developing a Vue component for my application that serves as a countdown timer, starting from X minutes and ending at 00:00.

Although I understand that animating with svg can achieve the desired effect, I lack the necessary expertise in using any svg libraries.

The animation I need for my progress component should move smoothly along a path based on time, with nodes being added or updated accordingly.

Here is my existing countdown component:

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(() => {
      this.date = moment(this.date.subtract(1, 'seconds'));
        
      if(this.date.diff(moment(0)) === 0){
        clearInterval(timer);
        
        alert('Done!');
      }
    }, 1000);
  }
});

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">{{ time }}</div>

Here is the svg code for the progress circle:

<svg x="0px" y="0px" viewBox="0 0 90 90">
    <style type="text/css">
        .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;}
    </style>
    <rect class="st0" width="90" height="90"/>
    <circle class="st1" cx="45" cy="45" r="40"/>
    <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"/>
    <circle class="st3" cx="45" cy="5" r="3"/>
</svg>

How can I go about achieving the intended outcome?

I would greatly appreciate any assistance provided.

javascript css animation svg vue.js

Answer 1

Answer №1

To create the arc, it is essential to have a good understanding of SVG shapes, especially the <path> element.

Here's an illustration:

Vue.component('progress-ring', {
  template: '#progress-ring',
  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 1,
    },
    text: {
      type: null,
      default: '',
    },
  },
  computed: {
    theta() {
      const frac = (this.value - this.min) / (this.max - this.min) || 0;
      return frac * 2 * Math.PI;
    },
    path() {
      const large = this.theta > Math.PI;
      return `M0,-46 A46,46,0,${large ? 1 : 0},1,${this.endX},${this.endY}`;
    },
    endX() {
      return Math.cos(this.theta - Math.PI * 0.5) * 46;
    },
    endY() {
      return Math.sin(this.theta - Math.PI * 0.5) * 46;
    },
  },
});

new Vue({
  el: '#app',
});

body {
  font-family: sans-serif;
}

.progress-ring {
  width: 100px;
  height: 100px;
}

.progress-ring-circle {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 1;
  fill: none;
}

.progress-ring-ring {
  stroke: #007fff;
  stroke-width: 2;
  fill: none;
}

.progress-ring-end {
  fill: #007fff;
}

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <progress-ring :min="0" :max="100" :value="40" text="12:34"></progress-ring>
</div>

<template id="progress-ring">
  <svg class="progress-ring" viewBox="-50,-50,100,100">
    <circle class="progress-ring-circle" r="46"/>
    <path class="progress-ring-ring" :d="path"/>
    <circle class="progress-ring-end" :cx="endX" :cy="endY" r="4"/>
    <text alignment-baseline="middle" text-anchor="middle">{{ text }}</text>
  </svg>
</template>

To animate it, you can simply manipulate the value prop using JavaScript, utilizing functions like setInterval or other techniques.

Answer 2

To create the arc, it is essential to have a good understanding of SVG shapes, especially the <path> element.

Here's an illustration:

Vue.component('progress-ring', {
  template: '#progress-ring',
  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 1,
    },
    text: {
      type: null,
      default: '',
    },
  },
  computed: {
    theta() {
      const frac = (this.value - this.min) / (this.max - this.min) || 0;
      return frac * 2 * Math.PI;
    },
    path() {
      const large = this.theta > Math.PI;
      return `M0,-46 A46,46,0,${large ? 1 : 0},1,${this.endX},${this.endY}`;
    },
    endX() {
      return Math.cos(this.theta - Math.PI * 0.5) * 46;
    },
    endY() {
      return Math.sin(this.theta - Math.PI * 0.5) * 46;
    },
  },
});

new Vue({
  el: '#app',
});

body {
  font-family: sans-serif;
}

.progress-ring {
  width: 100px;
  height: 100px;
}

.progress-ring-circle {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 1;
  fill: none;
}

.progress-ring-ring {
  stroke: #007fff;
  stroke-width: 2;
  fill: none;
}

.progress-ring-end {
  fill: #007fff;
}

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <progress-ring :min="0" :max="100" :value="40" text="12:34"></progress-ring>
</div>

<template id="progress-ring">
  <svg class="progress-ring" viewBox="-50,-50,100,100">
    <circle class="progress-ring-circle" r="46"/>
    <path class="progress-ring-ring" :d="path"/>
    <circle class="progress-ring-end" :cx="endX" :cy="endY" r="4"/>
    <text alignment-baseline="middle" text-anchor="middle">{{ text }}</text>
  </svg>
</template>

To animate it, you can simply manipulate the value prop using JavaScript, utilizing functions like setInterval or other techniques.

Answer 3

Answer №2

Another way to implement this is by defining the path in an array where each node represents a step in the path. Then, you can push each path node to the current progress path at regular intervals.

Here's a demonstration of this concept:

var app = new Vue({
  el: '#app',
  data: {
    date: moment(2 * 60 * 1000),
    pathRoute: ['M45 5', 'c22.1 0 40 17.9 40 40','S67.1 85 45 85','S5 67.1 5 45','S22.9 5 45 5'],
    pathProgess: [],
    stepIndex: 0
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    },
    computedProgress: function () {
      return this.pathProgess.join(' ')
    }
  },
  mounted: function(){
  var timer = setInterval(() => {
      this.date = moment(this.date.subtract(1, 'seconds'));
      this.$set(this.pathProgess, this.stepIndex, this.pathRoute[this.stepIndex])
      this.stepIndex++
      if(this.date.diff(moment(0)) === 0){
        clearInterval(timer);
      }
    }, 1000);
  }
});

.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;}

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
<p>{{computedProgress}}</p>
<svg x="0px" y="0px" viewBox="0 0 90 90">
    <rect class="st0" width="90" height="90"/>
    <circle class="st1" cx="45" cy="45" r="40"/>
    <text class="circle-chart-percent" x="20.91549431" y="40.5" font-size="8">{{time}}</text>
    <path class="st2" :d="computedProgress"/>
    <circle class="st3" cx="45" cy="5" r="3"/>
</svg>

</div>

Alternatively, you can refer to this answer on another question, which explains how to calculate the path in real-time.

var app = new Vue({
  el: '#app',
  data: {
    date: moment(2 * 60 * 1000),
    pathProgess: ''
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    }
  },
  mounted: function(){
    let maxValue = this.date.diff(moment(0), 'seconds') //total seconds
  var timer = setInterval(() => {
      this.date = moment(this.date.subtract(1, 'seconds'))
      let curValue = this.date.diff(moment(0), 'seconds') // current seconds
      this.pathProgess = this.describeArc(45, 45, 40, 0, (maxValue-curValue)*360/maxValue)
      if(this.date.diff(moment(0)) === 0){
        clearInterval(timer);
      }
    }, 1000);
  },
  methods: {
      polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
        var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

        return {
          x: centerX + (radius * Math.cos(angleInRadians)),
          y: centerY + (radius * Math.sin(angleInRadians))
        };
      },
      describeArc: function (x, y, radius, startAngle, endAngle){

          var start = this.polarToCartesian(x, y, radius, endAngle);
          var end = this.polarToCartesian(x, y, radius, startAngle);

          var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

          var d = [
              "M", start.x, start.y, 
              "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
          ].join(" ");

          return d;       
      }
  }
});

.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;}

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
<p>{{pathProgess}}</p>
<svg x="0px" y="0px" viewBox="0 0 90 90">
    <rect class="st0" width="90" height="90"/>
    <circle class="st1" cx="45" cy="45" r="40"/>
    <text class="circle-chart-percent"x="20.91549431"y="40.5"font-size="8">{{time}}</text>
    <path class="st2" :d="pathProgess"/>
    <circle class="st3" cx="45" cy="5" r="3"/>
</svg>

</div>

Answer 4

Another way to implement this is by defining the path in an array where each node represents a step in the path. Then, you can push each path node to the current progress path at regular intervals.

Here's a demonstration of this concept:

var app = new Vue({
  el: '#app',
  data: {
    date: moment(2 * 60 * 1000),
    pathRoute: ['M45 5', 'c22.1 0 40 17.9 40 40','S67.1 85 45 85','S5 67.1 5 45','S22.9 5 45 5'],
    pathProgess: [],
    stepIndex: 0
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    },
    computedProgress: function () {
      return this.pathProgess.join(' ')
    }
  },
  mounted: function(){
  var timer = setInterval(() => {
      this.date = moment(this.date.subtract(1, 'seconds'));
      this.$set(this.pathProgess, this.stepIndex, this.pathRoute[this.stepIndex])
      this.stepIndex++
      if(this.date.diff(moment(0)) === 0){
        clearInterval(timer);
      }
    }, 1000);
  }
});

.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;}

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
<p>{{computedProgress}}</p>
<svg x="0px" y="0px" viewBox="0 0 90 90">
    <rect class="st0" width="90" height="90"/>
    <circle class="st1" cx="45" cy="45" r="40"/>
    <text class="circle-chart-percent" x="20.91549431" y="40.5" font-size="8">{{time}}</text>
    <path class="st2" :d="computedProgress"/>
    <circle class="st3" cx="45" cy="5" r="3"/>
</svg>

</div>

Alternatively, you can refer to this answer on another question, which explains how to calculate the path in real-time.

var app = new Vue({
  el: '#app',
  data: {
    date: moment(2 * 60 * 1000),
    pathProgess: ''
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    }
  },
  mounted: function(){
    let maxValue = this.date.diff(moment(0), 'seconds') //total seconds
  var timer = setInterval(() => {
      this.date = moment(this.date.subtract(1, 'seconds'))
      let curValue = this.date.diff(moment(0), 'seconds') // current seconds
      this.pathProgess = this.describeArc(45, 45, 40, 0, (maxValue-curValue)*360/maxValue)
      if(this.date.diff(moment(0)) === 0){
        clearInterval(timer);
      }
    }, 1000);
  },
  methods: {
      polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
        var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

        return {
          x: centerX + (radius * Math.cos(angleInRadians)),
          y: centerY + (radius * Math.sin(angleInRadians))
        };
      },
      describeArc: function (x, y, radius, startAngle, endAngle){

          var start = this.polarToCartesian(x, y, radius, endAngle);
          var end = this.polarToCartesian(x, y, radius, startAngle);

          var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

          var d = [
              "M", start.x, start.y, 
              "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
          ].join(" ");

          return d;       
      }
  }
});

.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;}

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
<p>{{pathProgess}}</p>
<svg x="0px" y="0px" viewBox="0 0 90 90">
    <rect class="st0" width="90" height="90"/>
    <circle class="st1" cx="45" cy="45" r="40"/>
    <text class="circle-chart-percent"x="20.91549431"y="40.5"font-size="8">{{time}}</text>
    <path class="st2" :d="pathProgess"/>
    <circle class="st3" cx="45" cy="5" r="3"/>
</svg>

</div>

Guide on implementing a circular progress bar within a Vue component

Answer №1

Answer №2

Similar questions

Updating the table row by extracting data and populating it into a form

Exploring the use of color in text embellishments

Creating a dropdown feature for menu items in Vue when the number or width of items exceeds the menu bar's limits

VueJS component fails to remain anchored at the bottom of the page while scrolling

Angular 6 - Consistently returning a value of -1

There is only a singular model connected in the mongoose schema

An error was encountered with Ajax and JSONP due to an unexpected token causing a SyntaxError

Troubleshooting a Vue 2 component's prop receiving an incorrect value

Guide on incorporating a URL link into an <a class=> tag

What is the optimal approach for managing script initialization on both desktop and mobile devices?

Displaying Keystonejs list items on every page

Bootstrap navbar failing to be responsive - collapses instantly

Tips for updating the Vuetify 3 fontDisplayStyle

Tips on sorting items in React

Utilizing correct Django CSRF validation when making a fetch post request

Encountering a 500 error while attempting to deploy a Django Rest-Vue project on Heroku

The most efficient method for manipulating the DOM in React for superior performance

Utilize CSS to incorporate special characters as list markers

What steps should be taken to avoid an event from occurring when an error message is encountered?

Adjustment to website design when decreasing browser size