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