[Vuejs]-VueJS + MomentJS: How To Determine Time Progress

0👍

I can show you a solution without moment.js. It uses numerical value of js Date() object to calculate progress bar width:

new Vue({
  el: '#app',
  data: {
    progressWidth: 0, // initial width = 0
    duration: 1 * 1000, // concert duration, ms
    start: (new Date()).valueOf() // valueOf returns number of ms -> easy calculations
  },
  computed: {
    end: function() { // when event finishes
      return this.start + this.duration;
    }
  },
  methods: {
    startEvent: function(start, end) {
      const int = setInterval(() => { // calculate width periodically
        const now = (new Date()).valueOf();
        if (now >= end) { // if finished
          this.progressWidth = 100;
          clearInterval(int); return;
        };
        this.progressWidth = ((now - start)/(end - start)) * 100;
      }, 10)
    }
  },
  mounted() {
    this.startEvent(this.start, this.end) // start event
  }
});
#progress-container {
  width: 500px;
  border: 1px solid black;
  height: 20px;
}

#progress {
  height: 100%;
  width: 0%;
  background-color: green
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div id="progress-container">
    <div id="progress" :style="{width: progressWidth + '%'}"></div>
  </div>
</div>

Here start should be set to something like new Date(Date.parse('Jun 18 2017 12:30:00')). I believe there should be corresponding values in moment.js, but I’m not sure which ones you can use.

Leave a comment