diff --git a/source/Ox.UI/js/Core/Ox.LoadingIcon.js b/source/Ox.UI/js/Core/Ox.LoadingIcon.js index c4c2dca0..3cfaa732 100644 --- a/source/Ox.UI/js/Core/Ox.LoadingIcon.js +++ b/source/Ox.UI/js/Core/Ox.LoadingIcon.js @@ -25,21 +25,23 @@ Ox.LoadingIcon = function(options, self) { 'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size) ); - self.setOption = function(key, value) { - - }; - /*@ start Start loading animation () -> Loading Icon Element @*/ that.start = function() { - that.attr({ - src: Ox.UI.getImageURL('symbolLoadingAnimated') - }) - .animate({ - opacity: 1 - }, 250); + var deg = 0; + if (!self.loadingInterval) { + self.loadingInterval = setInterval(function() { + deg = (deg + 30) % 360; + that.css({ + OTransform: 'rotate(' + deg + 'deg)', + MozTransform: 'rotate(' + deg + 'deg)', + WebkitTransform: 'rotate(' + deg + 'deg)' + }); + }, 83) + that.animate({opacity: 1}, 250); + } return that; }; @@ -48,13 +50,13 @@ Ox.LoadingIcon = function(options, self) { () -> Loading Icon Element @*/ that.stop = function() { - that.animate({ - opacity: 0 - }, 250, function() { - that.attr({ - src: Ox.UI.getImageURL('symbolLoading') + var loadingInterval = self.loadingInterval; + if (self.loadingInterval) { + self.loadingInterval = void 0; + that.animate({opacity: 0}, 250, function() { + clearInterval(loadingInterval); }); - }); + } return that; };