diff --git a/index.js b/index.js index cbe4b504..0c972962 100644 --- a/index.js +++ b/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.$('') .addClass('loading') - .attr({src: app.getSRC('loading')}) + .attr({id: 'loadingIcon', src: app.getSRC('loading')}) .css(app.getCSS('loading')); }, logo: function() {