Getting Started with the Vue Progressbar Component in Vue 2

25 Apr 20259 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue Progressbar component

Prerequisites

System requirements for Syncfusion® Vue UI components

Dependencies

Below is the list of minimum dependencies required to use the progressbar component.

    |-- @syncfusion/ej2-vue-progressbar
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data: "*"
    |-- @syncfusion/ej2-svg-base

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

or

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion® components to the project.

Add Syncfusion® Vue packages

Syncfusion® packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Progressbar component as an example. Install the @syncfusion/ej2-vue-progressbar package by running the following command:

npm install @syncfusion/ej2-vue-progressbar --save

or

yarn add @syncfusion/ej2-vue-progressbar

The –save will instruct NPM to include the chart package inside of the dependencies section of the package.json.

Import Syncfusion® CSS styles

You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

The progressbar has different themes. They are:

  • Material
  • Fabric
  • Bootstrap
  • High Contrast

import chart component CSS as given below in <style> section of the App.vue file.

<style>
<!-- Material theme used for this sample -->
@import "../node_modules/@syncfusion/ej2-vue-progressbar/styles/material.css";
</style>

Add Syncfusion® Vue component

Follow the below steps to add the Vue Progressbar component:

1. First, import and register the Progressbar component in the script section of the src/App.vue file.

<script setup>
import { ProgressBarComponent as EjsProgressbar } from '@syncfuion/ej2-vue-charts';

</script>
<script>
import { ProgressBarComponent } from '@syncfuion/ej2-vue-charts';
export default {
name: "App",
components: {
    'ejs-progressbar': ProgressBarComponent
  }
}
</script>

2. In the template section, define the Progressbar component with the animation and value property.

<template>
  <div>
    <div id='loader'>LOADING....</div>
    <div id="container">
      <div class="row linear-parent">
        <div id="percentage" class="linear-progress">
          <ejs-progressbar
            id="percentage"
            type='Circular'
            :value='value'
            :animation="animation"
          >
          </ejs-progressbar>
        </div>
      </div>
    </div>
  </div>
</template>

3. Declare the value for the animation and value properties in the script section.

<script setup>
const value = 100;
const animation= {
  enable: true,
  duration: 2000,
  delay: 0
};
</script>
<script>
data: function() {
    return {
      value : 100,
      animation: {
        enable: true,
        duration: 2000,
        delay: 0
      },
    };
  }
</script>

Here is the summarized code for the above steps in the src/App.vue file:

<template>
  <div>
    <div id='loader'>LOADING....</div>
    <div id="container">
      <div class="row linear-parent">
        <div id="percentage" class="linear-progress">
          <ejs-progressbar
            id="percentage"
            type='Circular'
            :value='value'
            :animation="animation"
          >
          </ejs-progressbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ProgressBarComponent as EjsProgressbar } from "@syncfusion/ej2-vue-progressbar";

const value = 100;
const animation= {
  enable: true,
  duration: 2000,
  delay: 0
};

</script>
<style>
  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
  #container {
    display: -webkit-box;
}
</style>
<template>
  <div>
    <div id='loader'>LOADING....</div>
    <div id="container">
      <div class="row linear-parent">
        <div id="percentage" class="linear-progress">
          <ejs-progressbar
            id="percentage"
            type='Circular'
            :value='value'
            :animation="animation"
          >
          </ejs-progressbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ProgressBarComponent } from "@syncfusion/ej2-vue-progressbar";

export default {
name: "App",
components: {
    'ejs-progressbar': ProgressBarComponent
  },
  data: function() {
    return {
      value : 100,
      animation: {
        enable: true,
        duration: 2000,
        delay: 0
      },
    };
  },
  provide: {},
  methods: {}
}
</script>
<style>
  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
  #container {
    display: -webkit-box;
}
</style>

Run the project

To run the project, use the following command:

npm run serve

or

yarn  run serve

Module Injection

Progressbar component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the AppModule. feature service name and description as follows.

  • ProgressAnnotation - Inject this provider to use Annotation.

This module should be injected to the provide section as follows,

import { ProgressBarComponent, ProgressAnnotationService } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-progressbar': ProgressbarComponent
  },
  provide: {
    progressbar: [ProgressAnnotationService]
  }
};