ProgressBar Samples - InkJS

ProgressBar #1 - Setting the initial value throught data attributes

... changing value every 3s. 

<div class="ink-progress-bar grey" data-start-value="70%">
    <div class="bar grey"></div>
</div>
<script>
    Ink.requireModules(['Ink.UI.ProgressBar_1'],function(ProgressBar){
        var myFirstProgressBar = new ProgressBar('#progressbar1');
        var myFirstInterval = setInterval(function(){
            var myPercentage = ((Math.random() * 100)+1);
            myFirstProgressBar.setValue( myPercentage );
        },3000);
    });
</script>

ProgressBar #2 - Making all settings via Javascript

... and setting callbacks on each value change

<div class="ink-progress-bar grey">
    <div class="bar blue"></div>
</div>
<script>
    Ink.requireModules(['Ink.UI.ProgressBar_1'],function(ProgressBar){
        var mySecondProgressBar = new ProgressBar('#progressbar2',{
            startValue: 10,
            onStart: function( value ){
                console.log( 'ProgressBar Value BEFORE change: ' + value + '%' );
            },
            onEnd: function( value ){
                console.log( 'ProgressBar Value AFTER change: ' + value + '%' );
                Ink.s('#progressBar2Caption').innerHTML = value +'%';
            }
        });
        var mySecondInterval = setInterval(function(){
            var myPercentage = ((Math.random()*100)+1);
            mySecondProgressBar.setValue( myPercentage );
        },3000);
    });
</script>