Progress - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/progress

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">

  <b-progress v-model="counter" :precision="1" show-progress animated></b-progress>

  <b-btn class="mt-4" @click="clicked">Click me</b-btn>

</div>

CSS

#app {
  padding: 20px;
  height: 500px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    counter: 100,
  },
  methods: {
    clicked() {
      this.counter = Math.random() * 100;
      console.log("Change progress to " +
        Math.round(this.counter * 100) / 100);
    }
  }
})