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.

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

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


  • 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


I am a grey progress bar


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

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

Setting the progress bar to 20% programmatically


.setValue(newValue) method

Sets the value of the Progressbar


  • newValue

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