use css transform for loading icon on oxjs page, fixes #807
This commit is contained in:
parent
262d20405e
commit
56432a67bc
1 changed files with 23 additions and 2 deletions
25
index.js
25
index.js
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue