From 4f2dc7dd5304f2117dc55c07256caea7ba0bdcbb Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Sat, 20 Feb 2010 14:20:52 +0530
Subject: [PATCH] improving loading icon

---
 build/css/ox.ui.css | 10 ++++++++++
 build/js/ox.ui.js   | 32 +++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 3e46f2ca..d747ed22 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -660,9 +660,19 @@ Requests
 
 .OxLoadingIcon {
     opacity: 0;
+    -moz-user-select: none;
+    -webkit-user-select: none;
 }
 
+.OxLoadingIcon.OxLarge {
+    width: 20px;
+    height: 20px;
+}
 .OxLoadingIcon.OxMedium {
     width: 16px;
     height: 16px;
 }
+.OxLoadingIcon.OxSmall {
+    width: 12px;
+    height: 12px;
+}
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index b2640032..091bf0cf 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -3215,9 +3215,9 @@ requires
                 .addClass(
                     "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
                 );
+        self.count = 0;
         self.deg = 0;
         function update() {
-            Ox.print(self.deg, "deg");
             that.css({
                 MozTransform: "rotate(" + self.deg + "deg)",
                 WebkitTransform: "rotate(" + self.deg + "deg)"
@@ -3225,20 +3225,26 @@ requires
         }
         that.start = function() {
             self.deg = 0;
-            that.css({
-                opacity: 1
-            });
-            self.interval = setInterval(function() {
-                self.deg = (self.deg + 30) % 360;
-                update();
-            }, 83);
+            self.count++;
+            if (self.count == 1) {
+                self.interval = setInterval(function() {
+                    self.deg = (self.deg + 30) % 360;
+                    update();
+                }, 83);
+                that.animate({
+                    opacity: 1
+                }, 250);
+            }
         };
         that.stop = function() {
-            clearTimeout(self.interval);
-            self.deg = 0;
-            that.css({
-                opacity: 0
-            });
+            self.count--;
+            if (self.count == 0) {
+                clearTimeout(self.interval);
+                self.deg = 0;
+                that.animate({
+                    opacity: 0
+                }, 250);
+            }
         }
         return that;
     }