Vue.Js Progress Bar

Get percentage for progress bar with Vuejs

Not sure to understand on what total the percentage in calculated on the example you provided : you seem to fetch all data at once in your mounted hook, on what base do you want to define percentage ?

Besides that, you can render a progress bar by setting dynamically the width property of your progress bar element using a computed :

  computed: {
progressStyle() {
return {
width: this.progress + "%",
};
},
},

In your template, you just declare 2 elements : one container and inside your progress bar that will have a width expressed in % of the container:

  <div class="container">
<div class="progress-bar" :style="progressStyle"></div>
</div>

Through the :style attribute, the width of the div will be x% depending on the progress variable that you need to define to handle the logic to calculate the percentage. Again, Im not sure where you get your total from, so we'll have to assume a totalSalaries exists somewhere :

computed: {
progress(){
return this.salaries.length / this.totalSalaries * 100
},
progressStyle() {
return {
width: this.progress + "%",
};
},
},

Progressbar available in vue.js project using typescript

TypeScript is incrementally adoptable. Which means you can slowly transition a JS project to TS, you don't have to do it all at once.

Also, TS is a superset of JavaScript. Which means that, under the hood, it's still JavaScript and you can use JavaScript modules inside of it.

Here's what you can do when you find a JS module and want to use it inside a TS project:

  • check if someone else has published @types/your-module package, declaring all types of the module (where your-module needs to be the actual package name of the JS package). If existing, install it in devDependencies and TS will pick it up

  • if first option is not available, create a types.d.ts in your src folder and insert a line there declaring the module. e.g:

    declare module 'your-module';

This will tell TS: Sorry, no type definitions are available for this package, but I still want to use it. So TS won't throw any errors related to the package.

The most interesting part is that most IDEs will actually bypass this and will infer types from package's exports, which, in most cases, will give you autocomplete suggestions.

IDEs have gotten better at auto-inferring types, as of late.


Side note: for your particular case, you can extend the "custom" types definition with this definition. Not official and probably not complete, but better than the basic declare module "vue-progressbar" (which would work, btw).

Another note: you only need the module "vue/types/vue" declaration in Vue2, it's not necessary if you're using Vue3.

Progress bar with Vue and Axios object

You need to pass a function to your send operation that will be called later.

See example below

const config = {
Headers: {'Content-Type': 'multipart/form-data'},
onUploadProgress: progressEvent => {
var progress= parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100));
if (config.onProgress)
config.onProgress(progress);
}
}

export default {
send (data, onProgress) {
config.onProgress= onProgress;
return axios.post(baseUrl, data, config)
}
}

Then you upload code will be

upload.send(formData,(pogress)=>{
// Update your uploadPercentage here
})
.then(res => {
console.log(res.data)
})
.catch(() => {
console.log('Failure')
})

Vue - set bootstrap 5 progress bar width according to countdown timer advance

You can do something like this...

new Vue({
el: "#app",
data: () => ({
minutes: 10,
countdown: null
}),
methods: {
startTimer(){
let seconds = this.minutes // initial time
let et = this.$refs.elaspedTime
et.style.width = '0%'
this.countdown = setInterval(() => {
this.minutes--;
et.style.width = ((seconds - this.minutes) * 100)/seconds + '%'
if(this.minutes === 0){
this.stopTimer();
}
},1000);
},
stopTimer(){
clearInterval(this.countdown);
}
},
})

Demo


Also see: Using Bootstrap 5 with Vue

Dynamic progress bar length based on value from getter in Vue2 and SCSS

You can define a custom css property and use that property in style:

<div 
class="tasks-summary-container"
:style="{
'--progress-value': getTasksFulfilmentRate + '%' // custom css prop
}"
>
<div class="progress">
<div class="progress-value">
70 %
</div>
</div>
</div>

And:

@keyframes load {
0% {
width: 0;
}
100% {
width: var(--progress-value) // here goes the value from getter
}
}


Related Topics



Leave a reply



Submit