diff --git a/glances/outputs/glances_bottle.py b/glances/outputs/glances_bottle.py index f6f3187b..d757ae6e 100644 --- a/glances/outputs/glances_bottle.py +++ b/glances/outputs/glances_bottle.py @@ -68,6 +68,7 @@ class GlancesBottle(object): self._app.route('/', method="GET", callback=self._js_map) self._app.route('/', method="GET", callback=self._html) + self._app.route('/', 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.""" diff --git a/glances/outputs/static/css/style.css b/glances/outputs/static/css/style.css index 130bdb1c..8f02af5c 100644 --- a/glances/outputs/static/css/style.css +++ b/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 } } \ No newline at end of file diff --git a/glances/outputs/static/html/stats.html b/glances/outputs/static/html/stats.html index 257212fa..1e384f9e 100644 --- a/glances/outputs/static/html/stats.html +++ b/glances/outputs/static/html/stats.html @@ -1,5 +1,11 @@ - -
Loading...
+
+
+
+ +
Loading...
+
+
+
@@ -47,7 +53,7 @@
-
+
PER CPU
{{percpu.total}}%
@@ -273,9 +279,9 @@
-
-{{alert.begin}} ({{(alert[1]-alert[0]) | date : 'h:mm:ss'}}) - {{alert[2]}} on {{alert[3]}} ({{alert[4]}}) -
+
+ {{alert.begin}} ({{(alert[1]-alert[0]) | date : 'h:mm:ss'}}) - {{alert[2]}} on {{alert[3]}} ({{alert[4]}}) +
diff --git a/glances/outputs/static/images/glances.png b/glances/outputs/static/images/glances.png new file mode 100644 index 00000000..2a8e62ba Binary files /dev/null and b/glances/outputs/static/images/glances.png differ