Shows an inline spinner when searching

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index de6ff699aaadb1eb0040245a36629935ac7e3610..d72b65663cb796b6d4c86e20bccc757c5c4299d4 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -5353,6 +5353,7 @@ WCF.Search.Base = Class.extend({
                                }
                        };
                        
+                       this._searchInput.parents('.searchBar').addClass('loading');
                        this._proxy.setOption('data', {
                                actionName: 'getSearchResultList',
                                className: this._className,
@@ -5488,6 +5489,7 @@ WCF.Search.Base = Class.extend({
         */
        _success: function(data, textStatus, jqXHR) {
                this._clearList(false);
+               this._searchInput.parents('.searchBar').removeClass('loading');
                
                if ($.getLength(data.returnValues)) {
                        for (var $i in data.returnValues) {

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 4659a77ee859c53f01de16653b0cece78352d4af..4a687d24bc967bd99375bf5d85550279a0bef647 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -119,6 +119,14 @@
                                position: absolute;
                                top: 12px;
                        }
+                       &.loading:before {
+                               content: "\f110";
+                               
+                               -moz-animation: spin 2s infinite linear;
+                               -o-animation: spin 2s infinite linear;
+                               -webkit-animation: spin 2s infinite linear;
+                               animation: spin 2s infinite linear;
+                       }
                        
                        > form {
                                display: inline-block;