Adjust the width of the Bootstrap 5 progress bar in Vue based on the progression of a countdown timer

Question

Adjust the width of the Bootstrap 5 progress bar in Vue based on the progression of a countdown timer

I am looking to utilize a bootstrap 5 progress bar in order to display the remaining time of a countdown. I have set up the necessary markup within my vuejs component template.

<div class="progress">
    <div class="progress-bar" ref="elaspedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        {{ minutes }} seconds
    </div>
</div>

Within my methods, I have created two functions - one to initiate the countdown and another to stop it when the minutes reach zero.

startTimer(){
    this.$refs.elaspedTime.width = '0%';
    this.countdown = setInterval( () => {
        this.minutes--;
        if( this.$refs.elaspedTime.width < '100%' ){
            this.$refs.elaspedTime.width += '0.6%';
        }
        if( this.minutes === 0 ){
            this.stopTimer();
        }
    }, 1000);
},
stopTimer(){
    clearInterval(this.countdown);
}

Is there a way for me to adjust the progress bar width dynamically until it reaches 100%, based on the elapsed countdown minutes?

javascript vue.js bootstrap-5

Answer 1

Answer №1

Here is a way to achieve the desired functionality...

const vm = new Vue({
    el: "#app",
    data: () => ({
        minutes: 10,
        countdown: null
    }),
    methods: {
        startTimer(){
          let seconds = this.minutes // set 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);
        }
    },
})

View Demo

For more information, check out: How to Use Bootstrap 5 with Vue.js

Answer 2

Here is a way to achieve the desired functionality...

const vm = new Vue({
    el: "#app",
    data: () => ({
        minutes: 10,
        countdown: null
    }),
    methods: {
        startTimer(){
          let seconds = this.minutes // set 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);
        }
    },
})

View Demo

For more information, check out: How to Use Bootstrap 5 with Vue.js

Adjust the width of the Bootstrap 5 progress bar in Vue based on the progression of a countdown timer

Answer №1

Similar questions

Transforming FullCalendar (jquery) into asp.net (ashx)

How can you retrieve the input value in JavaScript when the cursor is not focused?

When working on a React/Redux application, how do you decide between explicitly passing down a prop or retrieving it from the global state using mapStateToProps?

The nodejs events function is being triggered repeatedly

Dynamic and static slugs in Next.js routing: how to navigate efficiently

jQuery Toggle and Change Image Src Attribute Issue

Looking to subtly transition from the current webpage to the next one with a fading effect?

What methods does Angular use to display custom HTML tags in IE9/10 without causing any issues for the browser?

Adding TypeScript to your Vue 3 and Vite project: A step-by-step guide

What could be the reason for typescript not issuing a warning regarding the return type in this specific function?

Utilizing Windows Azure and restify for node.js Development

What is the process for extracting the period value from SMA technical indicators within highcharts?

Can we avoid the error callback of an AJAX request from being triggered once we have aborted the request?

Having trouble persisting my login status in Selenium using Python

Utilizing JavaScript to Retrieve Selected Parameter in SSRS Report

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

Storing data using angular-file-upload

Delete the span element if the password requirements are satisfied

How can I incorporate popups in React using mapbox-gl?

Is it necessary to have both Express and express-generator in my toolbox?