02.28.07

Dojo : How to animate a ProgressBar

Posted in Web Development at 2:33 am by skoobi

Let’s say you want to display a Dojo ProgressBar, that has a max progressValue of 10 :

width="200" height="20"
hasText="true"
progressValue="7"
maxProgressValue="10" id="testBar" showOnlyIntegers="true" />

Now, you want to animate it so that it progressively reaches its progressValue. Something like the following will be needed :

function animateProgressBar(progressBarName, targetValue anim) {
dojo.event.connect(
anim,
“onAnimate”,
function(e) {
var bar = dojo.widget.byId(progressBarName);
bar.setProgressValue(targetValue * e.x / 100);
}
);
}

dojo.addOnLoad(
function() {

var anim = new dojo.animation.Animation(
new dojo.math.curves.Line([0], [100])
, 2000);

animateProgressBar(
“stressLevelProgressBar”,
7 ,
anim
)

anim.play();
}
);

And it should be working…

Permalink