Индикатор выполнения Vue.js со значениями из вызова API

Question

У меня есть простой компонент, который извлекает данные из API, и я хотел бы добавить индикатор выполнения, который указывает на следующее обновление данных.Вызовы API выполняются с интервалом в 10 секунд, а сами данные обычно обновляются каждую минуту.

Значение индикатора выполнения основано на дате: 2018-12-04T16:10:09.508367Z, где я получаю секунды, используя moment library: moment().diff(2018-12-04T16:10:09.508367Z, 'seconds')

Поскольку это может быть случайное значение, шаги для индикатора выполнения не равны, и они не начинаются с полного бара.

Мне было интересно, есть ли способулучшить это?

Это мой псевдо код на коды и коробки, чтобы проиллюстрировать это.

<template>
  <b-container fluid>
    <b-row>
      <b-col md="12" class="p-0 fixed-top">
        <b-progress
          :value="progressCounter"
          :max="progressMax"
          height="5px"
          variant="warning"
        >
        </b-progress>
      </b-col>
    </b-row>
    <b-row>
      <b-col md="12" class="">
        {{ progressMax }} / {{ progressCounter }}
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "ProgressBar",
  data() {
    return {
      progressCounter: 60,
      progressMax: 60,
      interval: null,
      refresh: 10000,
      time: 0
    };
  },
  methods: {
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    progress() {
      /*
      this.time is just a pseudo code here, the real progressCounter is recived from
      an API call and seconds are calculated by deducting time from now:
      this.progressCounter = 60 - moment().diff(created, 'seconds')
      "created" comes from an API call and it's refreshed (~) every minute
      */
      if (this.time <= 10) {
        this.time = this.getRandomInt(40, 59);
      } else {
        this.time -= 10;
      }
      this.progressCounter = this.time;
      console.log(
        `this.time: ${this.time}, this.progressCounter: ${this.progressCounter}`
      );
    }
  },
  mounted() {
    this.interval = setInterval(
      function() {
        this.progress();
      }.bind(this),
      this.refresh
    );
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>