add Ox.LoadingScreen and Ox.ImageElement, update CSS

source/Ox.UI/css/Ox.UI.css

@@ -2691,6 +2691,17 @@ Miscellaneous
     padding: 0;
 }
 
+.OxLoadingScreen {
+    position: absolute;
+}
+.OxLoadingScreen > div {
+    position: absolute;
+    text-align: center;
+}
+.OxLoadingScreen > div > div {
+    margin-top: 4px;
+}
+
 .OxSpecialLink {
     padding: 0 2px 0 2px;
     border-radius: 2px;

source/Ox.UI/css/theme.css

@@ -1155,6 +1155,12 @@ Miscellaneous
 ================================================================================
 */
 
+.$themeClass .OxImageElement > .OxLoadingScreen {
+    background-image: -moz-linear-gradient(top, $imageLoadingGradient);
+    background-image: -o-linear-gradient(top, $imageLoadingGradient);
+    background-image: -webkit-linear-gradient(top, $imageLoadingGradient);
+}
+
 .$themeClass .OxSelectableElement {
     background-image: -moz-linear-gradient(top, $listItemGradient);
     background-image: -o-linear-gradient(top, $listItemGradient);

source/Ox.UI/js/Core/ImageElement.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Ox.ImageElement = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            height: 0,
+            src: '',
+            width: 0
+        })
+        .options(options || {})
+        .update({
+            height: setSizes,
+            src: loadImage,
+            width: setSizes
+        })
+        .addClass('OxImageElement');
+
+    self.$screen = Ox.LoadingScreen({size: 16}).appendTo(that);
+
+    loadImage();
+    setSizes();
+
+    function loadImage() {
+        if (self.$image) {
+            self.$image.off({load: showImage}).remove();
+        }
+        self.$image = $('<img>')
+            .one({load: showImage})
+            .attr({src: self.options.src});
+    }
+
+    function setSizes() {
+        var css = {
+            width: self.options.width,
+            height: self.options.height
+        };
+        self.$screen && self.$screen.options(css);
+        css = Ox.map(css, function(value) {
+            return value + 'px';
+        });
+        that.css(css);
+        self.$image.css(css);
+    }
+
+    function showImage() {
+        self.$screen.remove();
+        self.$image.appendTo(that);
+    }
+
+    return that;
+
+};

source/Ox.UI/js/Core/LoadingScreen.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Ox.LoadingScreen = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            height: 256,
+            size: 32,
+            text: '',
+            width: 256
+        })
+        .options(options || {})
+        .update({
+            height: setSizes,
+            text: function() {
+                self.$text && self.$text.html(self.options.text);
+            },
+            width: setSizes
+        })
+        .addClass('OxLoadingScreen');
+
+    self.$box = $('<div>').appendTo(that);
+
+    setSizes();
+
+    $('<img>')
+        .attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')})
+        .css({
+            width: self.options.size + 'px',
+            height: self.options.size + 'px'
+        })
+        .appendTo(self.$box);
+
+    if (self.options.text) {
+        self.$text = $('<div>')
+            .html(self.options.text)
+            .appendTo(self.$box);
+    }
+
+    function setSizes() {
+        var css = {
+            width: (self.options.text ? 256 : self.options.size),
+            height: self.options.size + (self.options.text ? 24 : 0)
+        };
+        css.left = Math.floor((self.options.width - css.width) / 2);
+        css.top = Math.floor((self.options.height - css.height) / 2);
+        css = Ox.map(css, function(value) {
+            return value + 'px';
+        });
+        that.css({
+            width: self.options.width + 'px',
+            height: self.options.height + 'px'
+        });
+        self.$box.css(css);
+    }
+
+    return that;
+
+};

source/Ox.UI/themes/aqua/json/theme.jsonc

@@ -77,6 +77,8 @@
 
     "gridGradient": [[248, 248, 248], [232, 232, 232]],
 
+    "imageLoadingGradient": [[255, 255, 255], [224, 224, 224]],
+
     "inputGradient": [[224, 224, 224], [255, 255, 255]],
     "inputActiveGradient": [[208, 208, 208], [240, 240, 240]],
     "inputDisabledGradient": [[224, 224, 224], [224, 224, 224]],

source/Ox.UI/themes/oxdark/json/theme.jsonc

@@ -77,6 +77,8 @@
 
     "gridGradient": [[8, 8, 8], [24, 24, 24]],
 
+    "imageLoadingGradient": [[32, 32, 32], [0, 0, 0]],
+
     "inputGradient": [[0, 0, 0], [32, 32, 32]],
     "inputActiveGradient": [[16, 16, 16], [48, 48, 48]],
     "inputDisabledGradient": [[16, 16, 16], [16, 16, 16]],

source/Ox.UI/themes/oxlight/json/theme.jsonc

@@ -77,6 +77,8 @@
 
     "gridGradient": [[248, 248, 248], [232, 232, 232]],
 
+    "imageLoadingGradient": [[255, 255, 255], [224, 224, 224]],
+
     "inputGradient": [[208, 208, 208], [255, 255, 255]],
     "inputActiveGradient": [[192, 192, 192], [240, 240, 240]],
     "inputDisabledGradient": [[224, 224, 224], [224, 224, 224]],

source/Ox.UI/themes/oxmedium/json/theme.jsonc

@@ -77,6 +77,8 @@
 
     "gridGradient": [[248, 248, 248], [232, 232, 232]],
 
+    "imageLoadingGradient": [[160, 160, 160], [128, 128, 128]],
+
     "inputGradient": [[144, 144, 144], [176, 176, 176]],
     "inputActiveGradient": [[160, 160, 160], [192, 192, 192]],
     "inputDisabledGradient": [[144, 144, 144], [144, 144, 144]],