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
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
prop | type | description | example | default value |
---|---|---|---|---|
color | String | circle progress fill color | #000000 | #2ecc71 |
width | Number | circle size | 180 | 150 |
fontSize | Number | circle progress value size | 64 | 64 |
pv | Number | circle progress value | 75 | 0 |
textColor | String | circle progress value color | #bdc3c7 | #bdc3c7 |
bold | String | circle progress outline width | 10 | 5 |
textBgColor | String | circle progress value background-color | #000000 | #f9f9f9 |
borderColor | String | circle progress outline color | #000000 | #bdc3c7 |
during | Number | circle progress animation dur-time | 2 | 0.8 |
bgColor | String | circle progress background-color | #000000 | #f0f0f0 |