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.
- [Vuejs]-Vue JS change submit button if errors
- [Vuejs]-Unable to use collection.set after createUserWithEmailAndPassword
Source:stackexchange.com