Override defaults with $.fn.progressbar.defaults.
The progressbar provides a feedback of showing progress of an long-running operation. The progress can be updated to let the user know that some operation is currently executing.
The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier. Add 'easyui-progressbar' class to <div/> markup.
- <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
Create ProgressBar using javascript.
- <div id="p" style="width:400px;"></div>
- $('#p').progressbar({
- value: 60
- });
We get the current value and set a new value for this component.
- var value = $('#p').progressbar('getValue');
- if (value < 100){
- value += Math.floor(Math.random() * 10);
- $('#p').progressbar('setValue', value);
- }
Name | Type | Description | Default |
---|---|---|---|
width | string | Set the progressbar width. | auto |
height | number | The height of the component. This property is available since version 1.3.2. | 22 |
value | number | The percentage value. | 0 |
text | string | The text template to be displayed on component. | {value}% |
Name | Parameters | Description |
---|---|---|
onChange | newValue,oldValue |
Fires when the value is changed.
Code example: $('#p').progressbar({ onChange: function(value){ alert(value) } }); |
Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
resize | width |
Resize the component.
Code example: $('#p').progressbar('resize'); // resize the bar with original width $('#p').progressbar('resize', 350); // resize the bar using a new width |
getValue | none | Return the current progress value. |
setValue | value | Set a new progress value. |