Circular Progressbar using Vue.js

Circular progress bars are visually appealing elements that convey information about the completion status of a task. In this detailed guide, we’ll explore the process of creating a circular progress bar using Vue.js. Leveraging the power of Vue.js and SVG (Scalable Vector Graphics), we’ll build a customizable and elegant component that you can seamlessly integrate into your Vue.js projects.

Introduction to Vue.js and Circular Progressbars

Vue.js is a progressive JavaScript framework that excels at building user interfaces. When combined with SVG, it becomes a powerful tool for creating dynamic and visually striking components, such as circular progress bars. This guide will walk you through the step-by-step process of crafting a circular progress bar component using Vue.js.

Setting Up the Vue.js Project

Start by initializing a new Vue.js project using the Vue CLI:

vue create vue-circular-progressbar

Navigate to the project directory:

cd vue-circular-progressbar

Install any additional dependencies you might need during the project, such as Vue CLI Service for development:

npm install @vue/cli-service --save

Designing the Circular Progressbar Component

Create a modular Vue component to encapsulate the structure and functionality of the circular progress bar. Let’s name it CircularProgressbar.vue:

<!-- CircularProgressbar.vue -->
<template>
  <div class="circular-progressbar" :style="{ width: size + 'px', height: size + 'px' }">
    <svg :width="size" :height="size" class="svg">
      <circle
        :cx="center"
        :cy="center"
        :r="radius"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="dashOffset"
        class="progress-circle"
      />
    </svg>
    <div class="percentage">{{ percentage }}%</div>
  </div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      required: true,
      validator: (value) => value >= 0 && value <= 100,
    },
    size: {
      type: Number,
      default: 100,
    },
  },
  computed: {
    center() {
      return this.size / 2;
    },
    radius() {
      return (this.size - this.strokeWidth) / 2;
    },
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    dashOffset() {
      const progress = this.percentage / 100;
      return this.circumference * (1 - progress);
    },
    strokeWidth() {
      return this.size * 0.1;
    },
  },
};
</script>

<style scoped>
/* Component-specific styles here */
.circular-progressbar {
  position: relative;
}

.svg {
  transform: rotate(-90deg);
}

.progress-circle {
  fill: none;
  stroke: #4caf50; /* Change the color as needed */
  stroke-width: 10;
  transition: stroke-dashoffset 0.3s ease-in-out;
}

.percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #555;
}
</style>

In this example, the CircularProgressbar component uses SVG to draw a circular progress bar based on the provided percentage. The percentage prop determines the completion status, and the size of the progress bar is customizable using the size prop.

Incorporating the Circular Progressbar into Your App

Integrate the CircularProgressbar component into your main application file (e.g., App.vue):

<!-- App.vue -->
<template>
  <div id="app">
    <CircularProgressbar :percentage="75" :size="150" />
  </div>
</template>

<script>
import CircularProgressbar from './components/CircularProgressbar.vue';

export default {
  components: {
    CircularProgressbar,
  },
};
</script>

<style>
/* Global styles here */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
}

#app {
  text-align: center;
  padding: 20px;
}
</style>

In this example, the CircularProgressbar component is used to display a circular progress bar with a completion status of 75%. You can customize the percentage and size props to fit the specific requirements of your application.

Here is the Vue.js component to make Circular Progressbar

Circular Progressbar using Vue.js

Installation

The easiest way to use v-circle is to install it from NPM and include it in your own Vue build process 

$ npm install v-circle

Build

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

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

API

CssCircles

proptypedescriptionexampledefault value
colorStringcircle progress fill color#000000#2ecc71
widthNumbercircle size180150
fontSizeNumbercircle progress value size6464
pvNumbercircle progress value750
textColorStringcircle progress value color#bdc3c7#bdc3c7
boldStringcircle progress outline width105
textBgColorStringcircle progress value background-color#000000#f9f9f9
borderColorStringcircle progress outline color#000000#bdc3c7
duringNumbercircle progress animation dur-time20.8
bgColorStringcircle progress background-color#000000#f0f0f0
CssCircles

Leave a Comment