Bootstrap Progress Bar with Vue

The below example uses Bootstrap 4.5, Vue 2 and Axios.

In order to get your real-time progress bar to show the correct values on upload or download, you will need to do the following:


//For upload
//For Download


export default {

data() {
       return {
             videoUploadPercentage: 0,
             videoDownloadPercentage: 0
YourMethodName: function (id) {
    let formData = new FormData();
    const config = {
        //Choose upload
        onUploadProgress: event => {
            this.videoUploadPercentage = Math.round(
                (event.loaded * 100) /
        //Or download
       onDownloadProgress: event => {
           this.videoDownloadPercentage = Math.round(
               (event.loaded * 100) /

    formData.append('_method', 'patch');'/admin/videos/' + id, formData, config).then((response) => {
        }).catch((error) => {});

Things to remember, if you test this upload on a tiny file (less than 10mb) you may not see the percentage moving up.

I experienced this issue when trying to test my progress bar with Vue on a file of about 9mb. But when I change the file from a 9mb to a 40mb, I started to see the difference.

Make sure you do not use the download or upload methods together, it is either one or the other :-)

I hope this will work out for you and you can thank us at by resharing this article to social networking websites.






















As an Amazon Associate I earn from qualifying purchases. This post may contain affiliate links which means I may receive a commission for purchases made through links.