How to display circular progress bar with Vuetify?

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).

1.Progress.blade.php

<div id ="app">
      <front-page ></front-page>
</div>

2.app/Http/Controllers/Api/ProgressController.php

<?php

namespace App\Http\Controllers\Api;
use App\Progress;
use App\Http\Controllers\Controller;
use App\Http\Resources\ProgressResource;
use Illuminate\Http\Request;

class ProgressController extends Controller
{
    public function index()
    {
      return ProgressResource::collection(Progress::paginate(4));

}
}

3.Resources app/Http/Resources/ProgressResources.php

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class ProgressResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return[
         'the_custom_id' => $this->id,
         'name' => $this->name,
         'goal' => $this->goal,
         'description' => $this->description,
         'value' => ProgressResource::mockData($this->goal),

     ];
    }

 public static function mockData($goal=1000)
    {
        // 0 to $goal takes 17 minutes
        $multiplier = ($goal + 7) / 1000;
        $count = substr(time(), -3);
        return intval(round($multiplier * $count, 0));
    }

}

4.Routes\api.php

Route::get('progress', 'Api\ProgressController@index');

To display the Api data installed Vue and **Vuetify through npm .

5. Resources\js\app.js

require('./bootstrap');
window.Vue = require('vue');

import Vuetify from "../plugins/vuetify"

Vue.component('front-page', require('./components/Front.vue').default);
const app = new Vue({
      vuetify: Vuetify,
      el: '#app',

});

6. I have created a components directory under js and created a file named Front.vue Resources/js/Components/Front.vue

<template>
 <v-app id="inspire">
    <div class="text-center progress" v-for = "(progressdata, index) in progress" v-bind:id="progressdata.id">
      <v-progress-circular
        :rotate="-90"
        :size= "400"
        :width="15"
        :value="progressdata.value"
          color="teal" >
        
      </v-progress-circular>
      </div>

 </v-app>
</template>

<script>

  export default {
     data: function() {
            return {
              progress: [],
              interval: {},
              value: 0,
            }
       },
 beforeDestroy () {
    clearInterval(this.interval)
  },

 mounted() {
       this.loadContents();

  },
methods: {
     loadContents: function() {
           //load Api
           axios.get('/api/progress')
           .then((response) => {
                this.progress = response.data.data;
               //console.log(items);

               this.start();
               //setInterval(this.loadContents, 1000);
         })
         .catch(function (error) {
           console.log(error);
    });
  },
start: function() {
      // And in this function we now have access to the progress array:
      for (const item of this.progress) {
         var a = item.value;
         var b = item.goal;
         console.log(a);
       //console.log(a);
       this.interval = setInterval(() => {
      if (this.value === this.b) {
        return (this.value = 0)
      }
      this.value += 10
    }, 100)

   }
 }
}
}
</script>
<style lang="css" scoped>
.v-progress-circular {
margin: 1rem;
}

</style>

This is the output .

The output should be displayed in the below manner.

• 1.Goal and value are the 2 parameters used in the progress bar, Where Goal should be always greater than Value, In some cases, the data from api where goal is smaller than value. At that case am recieving an error like the below,

Error:<svg> attribute viewBox: A negative value is not valid. ("-40 -40 -80 -80"),

which I don't know how to solve?. Could someone please help?

• 2.value occupies the entire progress bar even the goal has not been achieved.

like the image above.

• 3.The entire progress bar width should be based on goal and the value should be based on the server value , but I couldn't get the result done.

• 4.Though the goal has not been reached the Value occupies the entire width of the bar.

Could anybody help to solve this issue? and help if I did something wrong in the code. Thanks

via Chebli Mohamed