<template>
  <div>
  <h2>Basic ProgressBar</h2>
  <div style="margin-bottom:20px">
    <LinkButton :disabled="disabled" @click="run()">Start</LinkButton>
  </div>
  <ProgressBar :value="value"></ProgressBar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      disabled: false
    };
  },
  methods: {
    run() {
      this.disabled = true;
      let timeout = Math.random() * 500;
      setTimeout(() => {
        this.value += Math.floor(Math.random() * 10);
        if (this.value > 100) {
          this.value = 100;
          this.disabled = false;
        } else {
          this.run();
        }
      }, timeout);
    }
  }
};
</script>