Vuetify — Linear Progress Bar Customization

Vuetify is a popular UI framework for Vue apps.

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

Query Indeterminate and Determinate

We can use the query state to control the truthiness of the indeterminate prop.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear v-model="value" :active="show" :indeterminate="query" :query="true"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 0,
      query: false,
      show: true,
      interval: 0,
    };
  },
`
  mounted() {
    this.queryAndIndeterminate();
  },
`
  beforeDestroy() {
    clearInterval(this.interval);
  },
`
  methods: {
    queryAndIndeterminate() {
      this.query = true;
      this.show = true;
      this.value = 0;
`
      setTimeout(() => {
        this.query = false;
`
        this.interval = setInterval(() => {
          if (this.value === 100) {
            clearInterval(this.interval);
            this.show = false;
            return setTimeout(this.queryAndIndeterminate, 2000);
          }
          this.value += 25;
        }, 1000);
      }, 2500);
    },
  },
};
</script>

We set the this.query state to false so the progress bar becomes one that doesn’t animate forever.

Instead, it animates the bar according to this.value which we set as the value of v-model .

Custom Colors

We can set the color and background-color props to set the foreground and background colors:

<template>
  <div class="text-center">
    <v-progress-linear background-color="pink lighten-3" color="pink lighten-1" value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Rounded Bar

We can add the rounded prop to make the progress bar rounded:

<template>
  <div class="text-center">
    <v-progress-linear rounded value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Streaming Bar

The stream prop makes the bar move like a stream.

For example, we can write:

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

We add the stream prop to make the non-filled part, which is a dotted line, move.

Striped Bar

We can add the striped prop to make the filled part displayed with stripes:

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

Reversed Bar

We can make the filled part display from right to left with the reverse prop:

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

Toolbar Loader

The absolute prop lets us display the v-progress-linear component on a toolbar.

For instance, we can write:

<template>
  <v-card class="mx-auto mt-6" width="344">
    <v-system-bar>
      <v-spacer></v-spacer>
      <v-icon>mdi-square</v-icon>
      <v-icon>mdi-circle</v-icon>
      <v-icon>mdi-triangle</v-icon>
    </v-system-bar>
    <v-toolbar>
      <v-btn icon>
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-toolbar-title>App</v-toolbar-title>
      <v-progress-linear
        :active="loading"
        :indeterminate="loading"
        absolute
        bottom
        color="deep-purple accent-4"
      ></v-progress-linear>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
`
    <v-container style="height: 282px;">
      <v-row class="fill-height" align="center" justify="center">
        <v-scale-transition>
          <div v-if="!loading" class="text-center">
            <v-btn color="primary" @click="loading = true">Start loading</v-btn>
          </div>
        </v-scale-transition>
      </v-row>
    </v-container>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    loading: false,
  }),
`
  watch: {
    loading(val) {
      if (!val) return;
`
      setTimeout(() => (this.loading = false), 5000);
    },
  },
};
</script>

We have the v-progress-linear component with the absolute and bottom props to make it display at the bottom of the toolbar.

The v-progress-linear component is in the v-toolbar so that we have it displayed this way.

And we have the loading state to determine when it’s loading or not.

Slot

We can add our own content to the default slot:

<template>
  <div>
    <v-progress-linear v-model="progress" color="blue-grey" height="25">
      <template v-slot="{ value }">
        <strong>{{ Math.ceil(value) }}%</strong>
      </template>
    </v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    progress: 20,
  }),
};
</script>

The value is the value of the v-model .

Conclusion

We can customize a linear progress bar in various ways.