adding loading icon

build/css/ox.ui.css

@@ -651,3 +651,18 @@ Panels
     bottom: 0;
     overflow: hidden;
 }
+
+/*
+================================================================================
+Requests
+================================================================================
+*/
+
+.OxLoadingIcon {
+    opacity: 0;
+}
+
+.OxLoadingIcon.OxMedium {
+    width: 16px;
+    height: 16px;
+}

build/js/ox.ui.js

@@ -2230,7 +2230,9 @@ requires
                 .addClass("OxExtras")
                 .appendTo(that.$element);
             $.each(self.options.extras, function(position, extra) {
-                extra.appendTo(that.extras);
+                extra.css({
+                    float: "left" // fixme: need class!
+                }).appendTo(that.extras);
             });
         }
 
@@ -3188,23 +3190,64 @@ requires
         
     };
 
-})();
+    /*
+    ============================================================================
+    Requests
+    ============================================================================
+    */
 
-/*
-============================================================================
-Requests
-============================================================================
-*/
+    /*
+    ----------------------------------------------------------------------------
+    Ox.LoadingIcon
+    ----------------------------------------------------------------------------
+    */
 
-/*
-----------------------------------------------------------------------------
-Ox.Progressbar
-----------------------------------------------------------------------------
-*/
+    Ox.LoadingIcon = function(options, self) {
+        var self = self || {},
+            that = new Ox.Element("img", self)
+                .defaults({
+                    size: "medium"
+                })
+                .options(options || {})
+                .attr({
+                    src: oxui.path + "/png/ox.ui.classic/loading.png"
+                })
+                .addClass(
+                    "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
+                );
+        self.deg = 0;
+        function update() {
+            Ox.print(self.deg, "deg");
+            that.css({
+                MozTransform: "rotate(" + self.deg + "deg)",
+                WebkitTransform: "rotate(" + self.deg + "deg)"
+            });
+        }
+        that.start = function() {
+            self.deg = 0;
+            that.css({
+                opacity: 1
+            });
+            self.interval = setInterval(function() {
+                self.deg = (self.deg + 30) % 360;
+                update();
+            }, 83);
+        };
+        that.stop = function() {
+            clearTimeout(self.interval);
+            self.deg = 0;
+            that.css({
+                opacity: 0
+            });
+        }
+        return that;
+    }
 
-/*
-----------------------------------------------------------------------------
-Ox.Spinner
-----------------------------------------------------------------------------
-*/
+    /*
+    ----------------------------------------------------------------------------
+    Ox.Progressbar
+    ----------------------------------------------------------------------------
+    */
 
+
+})();