add glances logo and animation on loading page

glances/outputs/glances_bottle.py

@@ -68,6 +68,7 @@ class GlancesBottle(object):
         self._app.route('/<filename:re:.*\.js.map>', method="GET", callback=self._js_map)
         self._app.route('/<filename:re:.*\.html>', method="GET", callback=self._html)
         
+        self._app.route('/<filename:re:.*\.png>', method="GET", callback=self._images)
         self._app.route('/favicon.ico', method="GET", callback=self._favicon)
 
         # REST API
@@ -135,6 +136,11 @@ class GlancesBottle(object):
         """Bottle callback for *.js.map files."""
         # Return the static file
         return static_file(filename, root=os.path.join(self.STATIC_PATH, 'js'))
+
+    def _images(self, filename):
+        """Bottle callback for *.png files."""
+        # Return the static file
+        return static_file(filename, root=os.path.join(self.STATIC_PATH, 'images'))
     
     def _favicon(self):
         """Bottle callback for favicon."""

glances/outputs/static/css/style.css

@@ -93,4 +93,56 @@ body {
 #processlist .table-cell {
     padding: 0px 5px 0px 5px;
     white-space: nowrap;
+}
+
+/* Loading page */
+
+#loading-page .glances-logo {
+    background: url('glances.png') no-repeat center center;
+    background-size: contain;
+    height: 500px;
+}
+
+#loading-page .loader:before,
+#loading-page .loader:after,
+#loading-page .loader {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation: loading 1.8s infinite ease-in-out;
+    animation: loading 1.8s infinite ease-in-out;
+}
+#loading-page .loader {
+    margin: auto;
+    position: relative;
+    text-indent: -9999px;
+    -webkit-animation-delay: 0.16s;
+    animation-delay: 0.16s;
+}
+#loading-page .loader:before { left: -40px }
+#loading-page .loader:after {
+    left: 40px;
+    -webkit-animation-delay: 0.32s;
+    animation-delay: 0.32s;
+}
+#loading-page .loader:before,
+#loading-page .loader:after {
+    content: '';
+    position: absolute;
+    top: 0;
+}
+
+@-webkit-keyframes loading {
+    0%,
+    80%,
+    100% { box-shadow: 0 20px 0 -10px #56CA69 }
+    40% { box-shadow: 0 20px 0 0 #56CA69 }
+}
+@keyframes loading {
+    0%,
+    80%,
+    100% { box-shadow: 0 20px 0 -10px #56CA69 }
+    40% { box-shadow: 0 20px 0 0 #56CA69 }
 }

glances/outputs/static/html/stats.html

@@ -1,5 +1,11 @@
-
-    <div ng-show="!result" class="container-fluid">Loading...</div>
+    <div ng-show="!result" class="container-fluid" id="loading-page">
+        <div class="row">
+            <div class="col-sm-6 col-sm-offset-3">
+                <div class="glances-logo"></div>
+                <div class="loader">Loading...</div>
+            </div>
+        </div>
+    </div>
     <div ng-show="result" class="container-fluid">
         <div class="row">
             <div class="col-sm-12">
@@ -47,7 +53,7 @@
                         </div>
                     </div>
 
-		            <div class="table" ng-show="show.per_cpu">
+    	            <div class="table" ng-show="show.per_cpu">
                         <div class="table-row">
                             <div class="table-cell text-left title">PER CPU</div>
                             <div class="table-cell" ng-repeat="percpu in result.percpu">{{percpu.total}}%</div>
@@ -273,9 +279,9 @@
                 <section id="alert" class="plugin" ng-show="show.alert">
                     <div class="table">
                         <div class="table-row" ng-repeat="alert in result['alert']">
-		                    <div class="table-cell text-left">
-{{alert.begin}} ({{(alert[1]-alert[0]) | date : 'h:mm:ss'}}) - {{alert[2]}} on {{alert[3]}} ({{alert[4]}})
-							</div>
+    	                    <div class="table-cell text-left">
+    {{alert.begin}} ({{(alert[1]-alert[0]) | date : 'h:mm:ss'}}) - {{alert[2]}} on {{alert[3]}} ({{alert[4]}})
+    						</div>
                         </div>
                     </div>
                 </section>