Vue
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Events in Vue ProgressBar component

Value Change

valueChanged event is triggered when the progress value is changed.

App.vue

<template>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="percentage" class="linear-progress">
             <ejs-progressbar
              refs=event
              id='percentage'
              type='Linear'
              :trackThickness='trackThickness'
              :progressThickness='progressThickness'
              :value='value'
              :labelStyle='labelStyle'
              :valueChanged='valueChanged'
              :showProgressValue='showProgressValue'
              :animation='animation'
              >
            </ejs-progressbar>
          </div>
         <button id="reLoad" @click="onClick()">ValueChanged</button>
       </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Browser } from "@syncfusion/ej2-base";
import { ProgressBarPlugin } from "@syncfusion/ej2-vue-progressbar";

Vue.use(ProgressBarPlugin);

export default Vue.extend({
  data: function() {
    return {
     trackThickness:24,
     progressThickness:24,
     value:90,
     animation: {
       enable: true,
       duration: 2000,
       delay: 0
       },
     labelStyle: {
       color: '#FFFFFF'
       },
     showProgressValue: true
    };
  },
  provide: {},
  methods: {
     valueChanged: function(args) {
        args.progressColor = '#2BB20E';
     },
     onClick: ()=> {
       this.refs.event.value = 50;
     }
  }
});
</script>
<style>
  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
  #container {
    display: -webkit-box;
}
</style>

ProgressCompleted

ProgressCompleted event is triggers when the ProgressBar attains the maximum value.

App.vue

<template>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="percentage" class="linear-progress">
             <ejs-progressbar
              id='percentage'
              type='Linear'
              :trackThickness='trackThickness'
              :progressThickness='progressThickness'
              :value='value'
              :labelStyle='labelStyle'
              :ProgressCompleted='ProgressCompleted'
              :showProgressValue='showProgressValue'
              :animation='animation'
              >
            </ejs-progressbar>
          </div>
         </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Browser } from "@syncfusion/ej2-base";
import { ProgressBarPlugin } from "@syncfusion/ej2-vue-progressbar";

Vue.use(ProgressBarPlugin);

export default Vue.extend({
  data: function() {
    return {
     trackThickness:24,
     progressThickness:24,
     value:90,
     animation: {
       enable: true,
       duration: 2000,
       delay: 0
       },
     labelStyle: {
       color: '#FFFFFF'
       },
     showProgressValue: true
    };
  },
  provide: {},
  methods: {
     ProgressCompleted: function(args) {
        args.progressColor = '#2BB20E';
     }
   }
});
</script>
<style>
  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
  #container {
    display: -webkit-box;
}
</style>
Previous
Next