Vue 2.0 Progress Bar

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="progress-bar">
    <span class="progress-bar__slide" :style="{
      'transition-duration': (duration/1000)+'s',
      'background': color,
      'width': width
    }"></span>
  </div>
</div>

CSS

.progress-bar {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 8px;
  display: block;
  margin-bottom: 1em;
  background: #ddd;
}

.progress-bar__slide {
  position: absolute;
  background: '#000';
  top: 0;
  left: 0;
  bottom: 0;
  display: block;
  width: 1px;
  transition: 3s linear;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      color: '#039',
      duration: '3000',
      width: '1px'
    }
  },
  mounted() {
    this.$nextTick(function(){this.width="100%"})
  }
})