Vuetify — Progress Display

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Progress Circular

We can add a circular progress display with the v-progress-circular component.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="primary"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The indeterminate prop makes it display forever.

And the color prop sets the color.

Size and Width

The size and width props let us change the size and width of the circular progress display:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="red" :width="3"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The width changes the width.

The size changes the radius in pixels of the circular progress display:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="red" :size="50"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Rotate

The rotate prop lets us customize the v-progress-circular component’s origin.

For instance, we can write:

<template>
  <div class="text-center">
    <v-progress-circular
      :rotate="360"
      :size="100"
      :width="15"
      :value="value"
      color="teal"
    >{{ value }}</v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      interval: {},
      value: 0,
    };
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  mounted() {
    this.interval = setInterval(() => {
      if (this.value === 100) {
        return (this.value = 0);
      }
      this.value += 10;
    }, 1000);
  },
};
</script>

to display the value inside the circle and also set the progress bar’s fill color according to value .

Progress Linear

In addition to a circular progress display, Vuetify also comes with the v-progress-linear component to display progress in a line.

For example, we can add one with:

<template>
  <div class="text-center">
    <v-progress-linear v-model="valueDeterminate" color="deep-purple accent-4"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      valueDeterminate: 50,
    };
  },
};
</script>

The v-model sets the progress value.

color has the color of the bar.

Indeterminate Bar

We can add the indeterminate prop to make it animate forever:

<template>
  <div class="text-center">
    <v-progress-linear indeterminate color="yellow darken-2"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Buffer

We can add a buffer state to represent 2 values simultaneously.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear v-model="value" :buffer-value="bufferValue"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 10,
      bufferValue: 20,
      interval: 0,
    };
  },

  watch: {
    value(val) {
      if (val < 100) return;

      this.value = 0;
      this.bufferValue = 10;
      this.startBuffer();
    },
  },

  mounted() {
    this.startBuffer();
  },

  beforeDestroy() {
    clearInterval(this.interval);
  },

  methods: {
    startBuffer() {
      clearInterval(this.interval);

      this.interval = setInterval(() => {
        this.value += Math.random() * (15 - 5) + 5;
        this.bufferValue += Math.random() * (15 - 5) + 6;
      }, 2000);
    },
  },
};
</script>

We have the bufferValue which is higher than the value value.

v-model has the progress value and buffer-value has the 2nd value, which is bigger than the v-model ‘s value.

Conclusion

We can add a circular or linear progress display with Vuetify’s components.