How to use defer and each functions with this?

[extremed]

Hi

Im trying to animate a loading indicator with a image sprite

29872


.common-spinner.common-spinner-40x55 {
height: 55px;
width: 40px;
}

.common-spinner {
background: url("images/loading-sprite.png") no-repeat scroll 100% 100% transparent;
}

<div class="loading">
<div class="common-spinner common-spinner-40x55" id="common-spinner" style="background-position: 0px 0px;"></div>
</div>

so i tried something like this



function setBgPosition ()
{
var loader_positions = ['0', '-120', '-240', '-360', '-480', '-600', '-720'];
Ext.Array.each(loader_positions, function(name, index) {
Ext.get('common-spinner').setStyle('background-position', name + 'px 0px');
});
}


so the problem is its seems to ge going too fast, so i understand i have to slow down the speed while set position css inside ext each

any idea how to do this correctly? below there is a example built with jquery.

http://jsfiddle.net/X7tGb/2/

sorry fot the bad english.

Regards

[tobiu]

take a look at:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.TaskRunner

and don't forget to stop it when your loading is finished :)

i personally prefer to use animated images or CSS 3 transitions (keyframes and rotating).

[extremed]

Thanks a lot.

so now i have this


Ext.TaskManager.start({
run: setBgPosition,
interval: 1000
});

function setBgPosition ()
{
var loader_positions = ['0', '-120', '-240', '-360', '-480', '-600', '-720'];
Ext.Array.each(loader_positions, function(name, index) {
Ext.get('common-spinner').setStyle('background-position', name + 'px 0px');
});
}

still the problem is couldn't figure out a way to delay setStyle inside Ext.Array.each

[tobiu]

well, of course it does not work like this.

if you call the method that runs through the whole array each second, the transitions will not get delayed.

you need to delay only the call of the set style and add an info to which new position depending on the delay or #call.