Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

The add a circular spinner easily into a Vue app, we can use the vue-circle-progress library.

In this article, we’ll look at how to use it to add the spinner.

Installation

We can install the package by running:

npm i vue2-circle-progress

Usage

After installing the package, we can use it by writing:

<template>
  <div id="app">
    <vue-circle
      :progress="50"
      :size="100"
      :reverse="false"
      line-cap="round"
      :fill="fill"
      empty-fill="rgba(0, 0, 0, .1)"
      :animation-start-value="0.0"
      :start-angle="0"
      insert-mode="append"
      :thickness="5"
      :show-percent="true"
      @vue-circle-progress="progress"
      @vue-circle-end="progressEnd"
    >
      <p>Slot!</p>
    </vue-circle>
  </div>
</template>

<script>
import VueCircle from "vue2-circle-progress";
export default {
  components: {
    VueCircle
  },
  data() {
    return {
      fill: { gradient: ["red", "green", "blue"] }
    };
  },
  methods: {
    progress(event, progress, stepValue) {
      console.log(stepValue);
    },
    progressEnd(event) {
      console.log("Circle progress end");
    }
  }
};
</script>

The progress prop sets the progress to display at the end.

size is the diameter of the circular progress display.

reverse makes animation run counterclockwise.

line-cap sets the line cap.

fill has the fill color.

fill can also be a single color, we can set replace the gradient property with the color property.

And it can also be replaced with the image property.

So we can write:

{ color: "green" }

{ image: "https://picsum.photos/id/23/200/300" }

to add an image.

empty-fill has the fill color for an empty bar.

animation-start-value has the starting progress value.

start-angle is the starting angle of the circular progress spinner.

insert-mode specifies how the spinner is appended to the DOM.

thickness is the thickness of the line in pixels.

It also emits several events. The vue-circle-progress event is emitted when the circular progress spinner is loading.

vue-circle-end is emitted when the circle finishes loading.

The progress method has the stepValue parameter to get the progress value that’s being displayed.

The default slot has the content inside the circle.

Methods

It also comes with a few methods.

The updateProgress method updates the component progress value and animate the changes.

For example, we can write:

<template>
  <div id="app">
    <vue-circle
      :progress="50"
      :size="100"
      :reverse="false"
      line-cap="round"
      :fill="fill"
      empty-fill="rgba(0, 0, 0, .1)"
      :animation-start-value="0.0"
      :start-angle="0"
      insert-mode="append"
      :thickness="5"
      :show-percent="true"
      @vue-circle-progress="progress"
      @vue-circle-end="progressEnd"
      ref="circleProgress"
    >
      <p>Slot!</p>
    </vue-circle>
    <button @click="updateProgress">update progress</button>
  </div>
</template>

<script>
import VueCircle from "vue2-circle-progress";
export default {
  components: {
    VueCircle
  },
  data() {
    return {
      fill: { gradient: ["red", "green", "blue"] }
    };
  },
  methods: {
    progress(event, progress, stepValue) {
      console.log(stepValue);
    },
    progressEnd(event) {
      console.log("Circle progress end");
    },
    updateProgress() {
      this.$refs.circleProgress.updateProgress(21);
    }
  }
};
</script>

to add an update progress button to change the progress percentage.

We call updateProgress by assigning the component a ref and call it from the ref.

Conclusion

We can add a circular progress display with the vue-circular-progress library.

Add a Circular Progress Display with vue2-circle-progress

Installation

Usage

Methods

Conclusion