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

Question

I want to use a bootstrap 5 progress bar to show the remaning time of a countdown. I've created the needed markup in 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>

In my methods I have this two functions, one is for starting the countdown and the other to stop it when the minutes reach the 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);
    }

How I can change the progress bar width until it reach the 100% according to the countdown minutes elasped?

Where is the code/trigger that starts/stops the timer? The Vue data()? please include all the relevant code — Carol Skelly, Apr 28 '21 at 12:35

Carol Skelly · Accepted Answer · 2021-04-28T13:02:05.907

2

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

edited Apr 28 '21 at 13:02

answered Apr 28 '21 at 12:45

Carol Skelly

351,302
90
710
624

1

Thank you, works like charm.I was missing the `el.style.width` and the calculation about the countdown `((seconds - this.minutes) * 100)/seconds + '%'` – newbiedev Apr 28 '21 at 13:12
Just a question, will the progress bar width stop filling when reach 100%? – newbiedev Apr 28 '21 at 13:14
1

Yes because the timer stops with minutes === 0 – Carol Skelly Apr 28 '21 at 13:15

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

1 Answers1