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
     ============================================================================
     */
 
+    /*
+    ----------------------------------------------------------------------------
+    Ox.LoadingIcon
+    ----------------------------------------------------------------------------
+    */
+
+    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.Progressbar
     ----------------------------------------------------------------------------
     */
 
-/*
-----------------------------------------------------------------------------
-Ox.Spinner
-----------------------------------------------------------------------------
-*/
 
+})();

demos/test/index.html

@@ -59,6 +59,13 @@
                     borderBottom: "1px solid rgb(160, 160, 160)"
                 })*/;
 
+                var loadingIcon = new Ox.LoadingIcon({
+                        size: "medium"
+                    })
+                    .css({
+                        marginLeft: "4px"
+                    });
+
                 var mainMenu = new Ox.MainMenu({
                     extras: [
                         new Ox.Input({
@@ -107,7 +114,8 @@
                             id: "find",
                             label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
                             labelWidth: 96
-                        }).width(320)
+                        }).width(320),
+                        loadingIcon
                     ],
                     menus: [
                         {
@@ -169,6 +177,12 @@
                     ],
                     size: "large"
                 });
+                Ox.Event.bind(null, "submit_find", function(data) {
+                    loadingIcon.start();
+                    setTimeout(function() {
+                        loadingIcon.stop();
+                    }, 5000);
+                });
                 var bottomPanel = Ox.Bar({size: "small"})
                     .css({
                         zIndex: 2,
@@ -455,6 +469,19 @@
                     placeholder: ["City", "State"],
                     selected: 1
                 }).addClass("margin").width(160).appendTo(mainPanel);
+                Ox.Button({
+                    selectable: true,
+                    size: size,
+                    type: "text",
+                    value: "Foo"
+                }).addClass("margin").appendTo(mainPanel);
+                Ox.Button({
+                    selectable: true,
+                    size: size,
+                    type: "text",
+                    value: "Bar"
+                }).addClass("margin").appendTo(mainPanel);
+                
                 //*/
                 function openDialog() {
                     var $dialog = new Ox.Dialog({