I am trying to create a progressbar i want to convert total value to percentage % and want to show it as a style width value, for example 40% out of 100% here 40% will 400USD and 100% will be 1000USD how can we do it is it possible to create some function in array object?
I am using VueJS 3 with Nuxt Js
Below is my VueJs code in < Progressbar /> component
<template>
<div>
<div class="progress mt-0 h-1 bg-gray-200 rounded-full w-full overflow-hidden transition-all">
<div class="bg-blue-600 h-1 progress-bar progress-bar-animated" role="progressbar" style="width: 88%;" :aria-valuenow="deal.collected" aria-valuemin="0" :aria-valuemax="deal.goal"></div>
</div>
</div>
</template>
Style
.progress-bar{
background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
background-size: 6px 6px;
}
.progress-bar-animated{
animation: 1s linear infinite progress-bar-stripes;
}
@keyframes progress-bar-stripes {
0% {
background-position-x: 0.5rem;
}
}
export default {
data(){
return{
deals:[
// deals
{
icon: require("../../assets/img/ico/ico-1.jpeg"),
name: "Agoric",
type: "Blockchain Service",
collected: 883673,
goal: 1000000,
status: "11h 3m" + " left",
link: "/"
}
]
}
},
}
Just use the formular deal.collected * 100 / deal.goal
new Vue({
el: '#app',
computed: {
percentage() {
return (deal) => deal.collected * 100 / deal.goal
}
},
data(){
return{
deals:[
// deals
{
icon: ''/*require("../../assets/img/ico/ico-1.jpeg")*/,
name: "Agoric",
type: "Blockchain Service",
collected: 883673,
goal: 1000000,
status: "11h 3m" + " left",
link: "/"
}
]
}
},
}).progress-bar{
background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
background-size: 6px 6px;
}
.progress-bar-animated{
animation: 1s linear infinite progress-bar-stripes;
}
@keyframes progress-bar-stripes {
0% {
background-position-x: 0.5rem;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="deal of deals">
<div class="progress mt-0 h-1 bg-gray-200 rounded-full w-full overflow-hidden transition-all">
<div class="bg-blue-600 h-1 progress-bar progress-bar-animated" role="progressbar" :style="{ 'width': percentage(deal) + '%' }" :aria-valuenow="deal.collected" aria-valuemin="0" :aria-valuemax="deal.goal"></div>
</div>
</div>
</div>