improving loading icon

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;
+}

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;
     }