Examples of vue-simple-progress for Vue.js

by Nevereverr

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://unpkg.com/vue-simple-progress@latest/dist/vue-simple-progress.min.js"></script>
<div id="demo">
  <p>Tiny Progress</p>
  <vue-simple-progress size="tiny" :val="10" text="10%"></vue-simple-progress>
  <p>Small Progress</p>
  <vue-simple-progress size="small" :val="20" text="20%"></vue-simple-progress>
  <p>Medium Progress</p>
  <vue-simple-progress size="medium" :val="40" text="40%"></vue-simple-progress>
  <p>Large Progress</p>
  <vue-simple-progress size="large" :val="60" text="60%"></vue-simple-progress>
  <p>Big Progress</p>
  <vue-simple-progress size="big" :val="80" text="80%"></vue-simple-progress>
  <p>Huge Progress</p>
  <vue-simple-progress size="huge" :val="90" text="90%"></vue-simple-progress>
  <p>Massive Progress</p>
  <vue-simple-progress size="massive" :val="100" text="100%"></vue-simple-progress>
  <p>Increasing percent (stops at 100%): {{increasing_pct}}%</p>
  <vue-simple-progress size="tiny" :val="increasing_pct" :text="increasing_pct + '%'"></vue-simple-progress>
  <p>Decreasing percent (stops at 0%): {{decreasing_pct}}%</p>
  <vue-simple-progress size="tiny" :val="decreasing_pct" :text="decreasing_pct + '%'"></vue-simple-progress>
  <p>Random percent: {{random_pct}}%</p>
  <vue-simple-progress size="tiny" :val="random_pct" :text="random_pct + '%'"></vue-simple-progress>
</div>

CSS

body {
  font-family: sans-serif;
  background: #fff;
  margin: 1rem;
}

JavaScript

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      random_pct: 0,
      increasing_pct: 0,
      decreasing_pct: 100
    }
  },
  mounted: function() {
    setInterval(() => {
      if (this.is_paused)
        return

      this.random_pct = Math.ceil(Math.random() * 100)
      this.increasing_pct = Math.min(this.increasing_pct + 5, 100)
      this.decreasing_pct = Math.max(this.decreasing_pct - 5, 0)
    }, 2000)
  }
})