All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.ProgressBar class

Associated to a .ink-progress-bar element, it provides a setValue() method to change the element's value.

Methods
Method name	Description
new ProgressBar(selector, [options])	Constructor
.setValue(newValue)	Sets the value of the Progressbar

new Ink.UI.ProgressBar(selector, [options])

Accepts

selector
Element or selector
options
Options object
options.startValue
Percentage of the bar that is filled. Ranges between 0 and 100. Default: 0
options.onStart
Callback called when a change of value is started
options.onEnd
Callback called when a change of value ends

Demo

I am a grey progress bar

Code

<div id="my-progress-bar" class="ink-progress-bar grey" data-start-value="70">
    <span class="caption">I am a grey progress bar</span>
    <div class="bar grey"></div>
</div>

<script>
    Ink.requireModules( ['Ink.UI.ProgressBar_1'], function(ProgressBar){
        var myProgressBar = new ProgressBar( '#my-progress-bar' );
    });
</script>

Setting the progress bar to 20% programmatically

myProgressBar.setValue(20);

.setValue(newValue) method

Sets the value of the Progressbar

Accepts

newValue
Numeric value, between 0 and 100, that represents the percentage of the bar.