Vue UI Components Documentation

Determines the duration of the progressbar's animation.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :animationDuration="1000"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Determines different color segments.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :colorRanges="colorRanges"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    },
    data: function () {
      return {
        colorRanges: [
          { stop: 20, color: "red" },
          { stop: 70, color: "blue" }
        ]
      }
    }
  }
</script>

Determines whether the progress bar is disabled.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :disabled="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the progress bar's height.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :height="50"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the jqxProgressBar's layout.

'normal'

'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :layout="'reverse'"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the progress bar's max value.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :max="250"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the progress bar's min value.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :min="30"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the orientation.

'vertical'

'horizontal'

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="40" :value="50" :showText="true" :height="500" :orientation="'vertical'"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :rtl="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :renderText="renderText"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    },
    methods: {
      renderText: function (text) {
        return "<span style='background: #ffe8a6; color: #e53d37; font-style: italic;'>" + text + "</span>";
      }
    }
  }
</script>

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :template="'success'"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true" :theme="'material'"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100).

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

Sets or gets the progress bar's width.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    }
  }
</script>

This event is triggered when the value is equal to the max. value.

Code examples

Bind to the complete event of jqxProgressBar.

<template>
  <div>
    <JqxProgressBar ref="myProgressBar" @complete="onComplete($event)"
            :width="500" :value="50" :showText="true" />
    <JqxButton style="margin-top: 15px;" :width="80" @click="setValue()">Set value</JqxButton>
  </div>
</template>
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxProgressBar,
      JqxButton
    },
    methods: {
      setValue: function () {
        this.$refs.myProgressBar.val(100);
      },
      onComplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user enters an invalid value( value which is not number or is out of the min - max range. )

Code examples

Bind to the invalidValue event of jqxProgressBar.

<template>
  <div>
    <JqxProgressBar ref="myProgressBar" @invalidValue="onInvalidValue($event)"
            :width="500" :value="50" :showText="true" :min="0" :max="100" />
    <JqxButton style="margin-top: 15px;" :width="80" @click="setValue()">Set value</JqxButton>
  </div>
</template>
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxProgressBar,
      JqxButton
    },
    methods: {
      setValue: function () {
        this.$refs.myProgressBar.val(-5);
      },
      onInvalidValue: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxProgressBar.

<template>
  <div>
    <JqxProgressBar ref="myProgressBar" @valueChanged="onValueChanged($event)"
            :width="500" :value="50" :showText="true" />
    <JqxButton style="margin-top: 15px;" :width="80" @click="setValue()">Set value</JqxButton>
  </div>
</template>
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxProgressBar,
      JqxButton
    },
    methods: {
      setValue: function () {
        this.$refs.myProgressBar.val(100);
      },
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Sets the progress bar's value.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    },
    mounted: function () {
      this.$refs.myProgressBar.actualValue(20);
    }
  }
</script>

Destroys the widget.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    },
    mounted: function () {
      this.$refs.myProgressBar.destroy();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxProgressBar ref="myProgressBar"
    :width="500" :value="50" :showText="true"
  />
</template>
 
<script>
  import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
 
  export default {
    components: {
      JqxProgressBar
    },
    mounted: function () {
      const value = this.$refs.myProgressBar.val();
    }
  }
</script>