use css transform for loading icon on oxjs page, fixes #807

This commit is contained in:
j 2012-05-29 12:25:39 +02:00
parent 262d20405e
commit 56432a67bc

View file

@ -37,6 +37,26 @@ Ox.load(function() {
);
});
},
animateLoading: function() {
var css, deg = 0,
previousTime = +new Date();
animationInterval = setInterval(function() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000,
loadingIcon = document.getElementById('loadingIcon');
if(loadingIcon) {
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css;
} else {
clearInterval(animationInterval);
}
}, 83);
},
data: {
html: {},
pages: [
@ -127,7 +147,7 @@ Ox.load(function() {
+ '/png/icon16.png';
} else if (element == 'loading') {
src = 'source/Ox.UI/themes/' + theme
+ '/svg/symbolLoadingAnimated.svg'
+ '/svg/symbolLoading.svg'
} else if (element == 'logo') {
src = 'source/Ox.UI/themes/' + theme
+ '/png/logo128.png'
@ -238,6 +258,7 @@ Ox.load(function() {
.append(app.$ui.screen)
.append(app.$ui.logo)
.append(app.$ui.loading);
app.animateLoading();
callback();
}
});
@ -414,7 +435,7 @@ Ox.load(function() {
loading: function() {
return Ox.$('<img>')
.addClass('loading')
.attr({src: app.getSRC('loading')})
.attr({id: 'loadingIcon', src: app.getSRC('loading')})
.css(app.getCSS('loading'));
},
logo: function() {