Add a Circular Progress Display with vue2-circle-progress
Tags: vue, javascript, programming, webdev
Published: 2021-01-20 03:05:46

**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" }
```

or

```
{ 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.