Circular progress bar in vue

I am new to vue and laravel.

I have created a laravel project and created a table name Progress and seeded some data.

Using api resource I have fetched the data's.

To display the API data I have installed Vue and Vuetify through npm in my project.

The idea is to display the API datas in a Circular Progress Barusing Vue.

I need 2 datas to include in the progressbar 1.Goal(Target) 2.Value(Server data).

My Code:

Front.vue

<template>
 <v-app id="inspire">
    <div class="text-center progress" v-for = "(progressdata, index) in progress" v-bind:id="progressdata">
      <v-progress-circular
        :rotate="360"
        :size="100"
        :width="150"
        v-bind:value="progressdata.value"

        color="teal"
      >
        
      </v-progress-circular>
      </div>

 </v-app>
</template>

<script>

  export default {
     data: function() {
            return {
              progress: [],
              //interval: {},
              //value: '',

          }
        },


    mounted() {
       this.loadContents();

  },
methods: {
     loadContents: function() {
           //load Api
           axios.get('/api/progress')
           .then((response) => {
               this.progress = response.data.data;
               //this.start();
               //setInterval(this.loadContents, 1000);
         })
         .catch(function (error) {
           console.log(error);
    });
  },
 }
}
</script>
<style lang="css" scoped>
.v-progress-circular {
margin: 1rem;
}

</style>

enter image description here

I need a progress bar similar to the above image.

I tried to run the code . But it gave an error. app.js:39839 Error: <svg> attribute viewBox: A negative value is not valid. ("-40 -40 -80 -80") where I could see only the values not circular bar.

How to bring target=goal and value = server data where the server data should be updated every second to 2 in a circular progress bar.

Could anyone please help me to fix this issue?

Thanks

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3fj8SvC
via IFTTT