CODEWITHSUNDEEP
javascriptlaraveltwitter-bootstrapvue.js
Toti Cuervo
Toti Cuervo

Reputation: 285

Bootstrap Vue: How to make progress bar fill smoothly over time

I am working on a project using VueJS and Bootstrap-Vue. I am using the progress bar as part of the loading screen. I would like it to load smoothly over 3 seconds. I can get this to sort of work, but the load progress is choppy.

I use SetTimeOut in order to progress the bar. I have tried a bunch of different combinations of times but I just can't make it looks smooth enough. 

<template>
    <div>
        <div class="row pt-5">
            <div class="col-md-12 text-center pt-5">
                <h1>{{this.timer}}</h1>
                <b-progress height="2rem" :striped=true show-progress :animated=true>
                    <b-progress-bar :value="value" variant="success">
                        <h5 v-if="value > 0">Loading</h5>
                    </b-progress-bar>
                </b-progress>
                <!--<b-progress height="2rem" variant="success" :value="value" show-progress class="mb-2"></b-progress>-->
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex';

    export default {
        data() {
            return {
                timer: 4,
                value: 0
            }
        },
        mounted() {
            this.startTimer();
        },
        methods: {
            startTimer() {

                let vm = this;

                setTimeout(function () {

                    vm.timer = vm.timer - 0.1;
                    vm.value = vm.value + 7;

                    if (vm.timer !== 0) {

                        vm.startTimer();

                    } else {
                        console.log('done');
                    }
                }, 25);
            }
        },
    }
</script>

<style scoped>

</style>

Is there a way to make the progress bar load smoothly over a specified amount of time?

Thanks!

Upvotes: 1

Views: 4638

Answers (1)

eli chen
eli chen

Reputation: 878

Maybe this goes good for you

<template>
  <div>
    <div class="row pt-5">
      <div class="col-md-12 text-center pt-5">
        <h1>{{this.timer}}</h1>
        <b-progress :max="max" height="2rem" :striped="true" show-progress :animated="true">
          <b-progress-bar :value="value" variant="success">
            <h5 v-if="value > 0">Loading</h5>
          </b-progress-bar>
        </b-progress>
        <!--<b-progress height="2rem" variant="success" :value="value" show-progress class="mb-2"></b-progress>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: 0,
      value: 0,
      max: 180
    };
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      let vm = this;
      let timer = setInterval(function() {
        vm.value += 6;
        if (vm.value >= 180) clearInterval(timer);
      }, 100);
    }
  }
};
</script>

<style scoped>
</style>

I don't know what the point of vm.timer in your code. so change the part of the vm.timer to fit to this code.

and btw i changed the setTimeOut to setInterval for perfomance reasons.

Upvotes: 1

Related Questions