VueJS Examples

Best VueJS Circular Progress Indicator Components

A curated list of the best Circular Progress Indicator components for VueJS.

1. vue3-circle-progress

Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable.

Here is demo screenshot:

Vue 3 Circle Progress

Live demo: codesandbox.io/s/determined-dawn-3ybev

Step 1: Installation

Install with npm:

npm install --save vue3-circle-progress

or yarn:

yarn add vue3-circle-progress

Step 2: Usage and Examples


<template>

  // Basic Usage
  <circle-progress :percent="40" />

  // Default Gradient
  <circle-progress :is-gradient="true"  />

  // Customize Gradient
  <circle-progress
      :is-gradient="true"
      :gradient="{
        angle: 90,
        startColor: '#ff0000',
        stopColor: '#ffff00'
    }"
  />

  // Default Shadow
  <circle-progress :is-bg-shadow="true" />

  // Customize Shadow
  <circle-progress
      :is-bg-shadow="true"
      :bg-shadow="{
        inset: true,
        vertical: 2,
        horizontal: 2,
        blur: 4,
        opacity: .4,
        color: '#000000'
    }"
      empty-color="#f7f7f7"
      :border-width="6"
      :border-bg-width="30"
  />
</template>

<script>

import "vue3-circle-progress/dist/circle-progress.css";
import CircleProgress from "vue3-circle-progress";
export default {
  components: {CircleProgress}
}

</script>

Read more


2. easy-circular-progress

easy-circular-progress.

Step 1: Install

npm install easy-circular-progress --save

Step 2: Quick Start

<template>
  <div id="app">
    <Progress value="16.88">
      <!-- <template v-slot:footer>
        <b>goood</b>
      </template>-->
    </Progress>
    <Progress strokeColor="#FF00AA" value="16.88">
      <template v-slot:footer>
        <b>More Color</b>
      </template>
    </Progress>

    <Progress :radius="50" :strokeWidth="10" value="86.12">
      <template v-slot:footer>
        <b>Bolder & Bigger One</b>
      </template>
    </Progress>

    <Progress
      :transitionDuration="5000"
      :radius="50"
      :strokeWidth="10"
      value="86.12"
    >
      <template v-slot:footer>
        <b>Slow One</b>
      </template>
    </Progress>

    <Progress
      :transitionDuration="5000"
      :radius="55"
      :strokeWidth="10"
      value="86.12567"
    >
      <template v-slot:footer>
        <b>More Precise</b>
      </template>
    </Progress>

    <Progress :transitionDuration="5000" :radius="55" :strokeWidth="10" value="86.12567">
      <div class="content">hello</div>
      <template v-slot:footer>
        <b>More Precise</b>
      </template>
    </Progress>
  </div>
</template>

<script>
import Progress from "easy-circular-progress";

export default {
  name: "app",
  components: {
    Progress
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100vh;
  color: #fff;
  background: #3e423a;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  margin: 0;
  padding: 0;
}
</style>

Read more


3. vue-svg-circle-progress

simple circle progress bar using SVG for VueJs2.

image

To use it:

import CircleProgress from './index.js'
export default {
  components:{
   CircleProgress
  }
}
<circle-progress :percentage="file.percentage"></circle-progress>

Read more


4. v-circle

A collection of circle progress with Vue.js.

Live Demo: xiaoa.name/v-circle

To build the examples locally, run:

npm install
npm run dev

Then open http://localhost:8080/examples/home.html in a browser.

Step 1: Installation

The easiest way to use v-circle is to install it from NPM and include it in your own Vue build process (using Webpack, etc)

$ npm install v-circle

build to dist

$ npm run build

You can also use the standalone build by including dist/v-circle.js in your page. If you use this, make sure you have already included Vue, and it is available as a global variable.

Step 2: Usage

.vue file usage

<template>
<circle-css color="#3498db" width=120 font-size=48 pv=12 bold=8 text-bg-color='#f0f0f0'></circle-css>
</template>

<script>
import CssCircle from 'v-circle/components/css-circle.vue'

export default {
  components: {
    circleCss: CssCircle
  }
}
</script>

Circles

  • CssCircles
  • SvgCircles
  • CanvasCircles

Read more


5. vue-ellipse-progress

A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG.

The purpose of this plugin is to combine the best properties of other available libraries and to add unique features, delivered in a simple to use component with friendly interface.

With the available options you can create simple circles very quickly. But playing with the combinations of props and with a bit of imagination you can create really exciting things.

Component demo

Step 1: Installation

Use your package manager or CDN to install and initialize the component.

NPM

Install the library via npm:

npm i vue-ellipse-progress

The component is provided as a Vue.js plugin. So just initialize it in your main.js:

import VueEllipseProgress from 'vue-ellipse-progress';

Vue.use(VueEllipseProgress);

// Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>

Usage direct as component:

<template>
  <vue-ellipse-progress :progress="50" />
</template>
<script>
import { VueEllipseProgress } from "vue-ellipse-progress";

export default {
  name: "MyComponent",
  components: { VueEllipseProgress },
};
</script>

CDN

Use this option where you have a global Vue.js instance available. You can customize and get the bundled and minified
component from JSDelivr.
Just add the following line to your HTML and start using the component, nothing more is required:

<script src="https://cdn.jsdelivr.net/npm/vue-ellipse-progress/dist/vue-ellipse-progress.umd.min.js"></script>

Step 2: Usage

After you have initialized the component, use it everywhere you want in your application:

<vue-ellipse-progress
  :data="circles"
  :progress="progress"
  :angle="-90"
  color="blue"
  :colorFill="colorFillGradient"
  emptyColor="#8ec5fc"
  :emptyColorFill="emptyColorFillGradient"
  :size="300"
  :thickness="10"
  emptyThickness="10%"
  lineMode="in 10"
  :legend="true"
  :legendValue="180"
  :legendFormatter="({currentValue}) => new Intl.NumberFormat('de-DE').format(currentValue)"
  legendClass="legend-custom-style"
  dash="60 0.9"
  animation="reverse 700 400"
  :noData="false"
  :loading="false"
  fontColor="white"
  :half="false"
  :gap="10"
  dot="10 blue"
  reverse
  fontSize="5rem">

  <span slot="legend-value">/200</span>
  <p slot="legend-caption">GOOD JOB</p>

</vue-ellipse-progress>

Read more


6. vue-circle-counter

This Vue component creates a circular counter.

The angle, colors, strokewidth, spacing between dashes and
direction can all be controlled through properties.

Examples

Examples of vue-circle-counter

Sample code on codesandbox

Browser example on Codepen

Project setup

With a package manager

# npm
$ npm install vue-circle-counter

#yarn
$ yarn add vue-circle-counter

For the browser

<script src="unpkg.com/vue-circle-counter@latest/dist/circleCounter.umd.min.js"></script>

How it works

The component generates an SVG element with default width and height of 100% (outer diameter of the counter).
Two dashed strokes are overlayed: the bottom one controlled by stroke and dashCount and the top one by
activeStroke and activeCount. You can reverse the direction to counter-clockwise and rotate the start
angle (default is right / 3 o'clock).

Read more


7. vue-circle-progress

A Vue.js component to draw animated circular progress bars.

Draw animated progress circle like below,

Step 1: Install it

// For Vue.js 2.0+
npm install vue2-circle-progress

Step 2: Usage

  1. Import the module
  2. Register it as a component as you would any other Vue component
  3. Use it within your template

Example

<template>
  <div id="app">
    <p>
      A Vue.js component to draw animated circular progress bars!
    </p>
      <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="progress_end">
          <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);
      },
      progress_end(event){
        console.log("Circle progress end");
      }
    }
  }
</script>

Read more