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 (whereyour-module
needs to be the actual package name of the JS package). If existing, install it indevDependencies
and TS will pick it upif first option is not available, create a
types.d.ts
in yoursrc
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
Transitioning Affixed Navigation Bar - CSS
How to Organize Minification and Packaging of CSS and Js Files to Speed Up Website
Infinite Rotation Animation Using CSS and JavaScript
Expand/Collapse Mobile Navbar Without JavaScript
JavaScript .Replace Alternative
Ng If with Angular for String Contains
How to Override Inline CSS Through JavaScript
Jquery - "Fadein Is Not a Function"
Fastest Way to Preload/Load Large Images
How to Set the Margin of an Object in Ie
Find Next Cell Contained in Sibling Row with Queryselector
iPad Safari Development Toolbar
Attempt to Add a Rule to a CSS Stylesheet Gives "The Operation Is Insecure" in Firefox
Vanilla JavaScript: How to Toggle Multiple CSS-Classes in One Statement
Onclick Show Div, But Hide When Other One Is Clicked