Is there a way to create a progress bar in VueJS 3 with Nuxt Js by converting the total value to a percentage and displaying it as a style width value? For example, if 40% out of 100% equals 400USD out of 1000USD, can we achieve this using a function in an 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: "/"
}
]
}
},
}