I've been exploring the features of Vuetify's progress circular component lately. This component allows you to specify a value prop, which represents the current progress percentage. The circle completes when the value reaches 100.
In my scenario, I'm working on a countdown where the maximum percentage value is limited to 10. I want the circle to indicate completion at this value. However, I'm facing challenges in achieving this for mid-range percentage values.
Is there a way to accomplish this?
Below is an example code snippet illustrating my attempt to replicate the completion effect of a 100-value circle for values like 10 and 20.
Note- Values can be multiples of 10, such as 10, 20, 30, 50, and so on.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
second_10: 10,
second_20: 20,
second_100: 100,
interval_10: null,
interval_20: null,
interval_100: null,
}
},
methods: {
countDown(val) {
this[`interval_${val}`] = setInterval(() => {
if(this[`second_${val}`] == 0) {
this[`second_${val}`] = val
} else {
this[`second_${val}`]--;
}
}, 1000)
},
stopCountDown() {
clearInterval(this.interval_10);
clearInterval(this.interval_20);
clearInterval(this.interval_100)
}
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5a59496c1e0254">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16606373627f706f562438253827">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6808393829f908fb6c4d8c5d8c7">[email protected]</a>/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-row>
<v-col cols="12" align="center">
<v-btn small color="error" @click="stopCountDown()">Stop Timer</v-btn>
</v-col>
<v-col>
<v-btn small @click="countDown(100)">start timer</v-btn>
<v-progress-circular
:rotate="360"
:size="50"
:width="5"
:value="second_100"
color="success"
class="mt-3"
>
{{ second_100 }}
</v-progress-circular>
</v-col>
<v-col>
<v-btn small @click="countDown(10)">start timer</v-btn>
<v-progress-circular
:rotate="360"
:size="50"
:width="5"
:value="second_10"
color="success"
class="mt-3"
>
{{ second_10 }}
</v-progress-circular>
</v-col>
<v-col>
<v-btn small @click="countDown(20)">start timer</v-btn>
<v-progress-circular
:rotate="360"
:size="50"
:width="5"
:value="second_20"
color="success"
class="mt-3"
>
{{ second_20 }}
</v-progress-circular>
</v-col>
</v-row>
</v-container>
</v-app>
</div>