Determines the duration of the progressbar's animation.

Code examples

Set the animationDuration property.

$('#jqxProgressBar').jqxProgressBar({ animationDuration: 0 });

Get the animationDuration property.

var animationDuration = $('#jqxProgressBar').jqxProgressBar('animationDuration'); 

Determines different color segments.

Code examples

Set the colorRanges property.

$('#jqxProgressBar').jqxProgressBar({
 colorRanges: [
 { stop: 20, color: '#F4D1D1' },
 { stop: 70, color: '#FF00FF' }
 ]
});

colorRanges Properties:

• stop - each one color start from zero to particular position. With decimal number is set a concrete stop. Possible values from ProgressBar's min to max.
• color - color of this segment.

Get the colorRanges property.

var colorRanges = $('#jqxProgressBar').jqxProgressBar('colorRanges');

Determines whether the progress bar is disabled.

Code examples

Set the disabled property.

$('#jqxProgressBar').jqxProgressBar({disabled:true});

Get the disabled property.

var disabled = $('#jqxProgressBar').jqxProgressBar('disabled'); 

Sets or gets the progress bar's height.

Code examples

Set the height property.

$('#jqxProgressBar').jqxProgressBar({height:"100px" });

Get the height property.

var height = $('#jqxProgressBar').jqxProgressBar('height');

Sets or gets the jqxProgressBar's layout.

Possible Values:

'normal'

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

Code examples

Set the layout property.

$('#jqxProgressBar').jqxProgressBar({ layout: "reverse" }); 

Get the layout property.

var layout = $('#jqxProgressBar').jqxProgressBar('layout'); 

Sets or gets the progress bar's max value.

Code examples

Set the max property.

$('#jqxProgressBar').jqxProgressBar({ max: 150 });

Get the max property.

var max = $('#jqxProgressBar').jqxProgressBar('max');

Sets or gets the progress bar's min value.

Code examples

Set the min property.

$('#jqxProgressBar').jqxProgressBar({ min: 10 });

Get the min property.

var min = $('#jqxProgressBar').jqxProgressBar('min');

Sets or gets the orientation.

Possible Values:

'vertical'

'horizontal'

Code examples

Set the orientation property.

$('#jqxProgressBar').jqxProgressBar({orientation: "vertical" });

Get the orientation property.

var orientation = $('#jqxProgressBar').jqxProgressBar('orientation');

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

Code example

Set the rtl property.

$('#jqxProgressBar').jqxProgressBar({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxProgressBar').jqxProgressBar('rtl'); 

Sets or gets the visibility of the progress bar's percentage's text.

Code examples

Set the showText property.

$('#jqxProgressBar').jqxProgressBar({showText:true});

Get the showText property.

var showText = $('#jqxProgressBar').jqxProgressBar('showText'); 

Determines the template as an alternative of the default styles.

Possible Values:

'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.

Code examples

Set the template property.

$("#jqxProgressBar").jqxProgressBar({ template: 'primary'});

Get the template property.

var template = $('#jqxProgressBar').jqxProgressBar('template');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

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

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

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

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

Code examples

Set the value property.

$('#jqxProgressBar').jqxProgressBar({ value: 100});

Get the value property.

var value = $('#jqxProgressBar').jqxProgressBar('value');

Sets or gets the progress bar's width.

Code examples

Set the width property.

$('#jqxProgressBar').jqxProgressBar({width:"250px" });

Get the width property.

var width = $('#jqxProgressBar').jqxProgressBar('width');

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

Code examples

Bind to the complete event by type: jqxProgressBar.

$('#jqxProgressBar').on('complete', function (event) { // Some code here. }); 

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 by type: jqxProgressBar.

$('#jqxProgressBar').on('invalidvalue', function (event) { // Some code here. });

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event by type: jqxProgressBar.

$('#jqxProgressBar').on('valueChanged', function (event) { var value = event.currentValue; });

Sets the progress bar's value.

Code examples

Invoke the actualValue method.

//@param Number

$('#jqxProgressBar').jqxProgressBar('actualValue', 50); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxProgressBar').jqxProgressBar('destroy'); 

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxProgressBar").jqxProgressBar('val');

// Get the value using jQuery's val()

var value = $("#jqxProgressBar").val();

// Set value.

$("#jqxProgressBar").jqxProgressBar('val', 50);

// Set value using jQuery's val().

$("#jqxProgressBar").val(50);