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

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() {