Animate processing dots

issue9619
review304291002

src/common.js

@@ -3269,10 +3269,16 @@
                 'id': 'processing',
                 'class': 'text-center'
             });
-            this.el.append(jQuery('<span/>', {
+            var label = jQuery('<span/>', {
                 'class': 'label label-info',
-                'text': Sao.i18n.gettext('Processing...')
-            }));
+                'text': Sao.i18n.gettext('Processing'),
+            }).appendTo(this.el);
+            for (var i = 0; i < 3; i ++) {
+                label.append(jQuery('<span/>', {
+                    'class': 'dot',
+                    'text': '.',
+                }));
+            }
             this.el.hide();
             jQuery(function() {
                 this.el.appendTo('body');

src/sao.less

@@ -839,11 +839,28 @@ input.column-boolean {
     }
 }
 
+@keyframes blink {
+    50% {
+        color: transparent;
+    }
+}
+
 #processing {
     position: fixed;
     top: 0px;
     width: 100%;
     z-index: 2000;
+
+    .dot {
+        animation: 1s blink infinite;
+
+        &:nth-child(2) {
+            animation-delay: 250ms;
+        }
+        &:nth-child(3) {
+            animation-delay: 500ms;
+        }
+    }
 }
 
 .scrollbar {