From 9e7a35c4a5a988e8da9e58458871e4e289f430ea Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Tue, 16 Oct 2018 05:40:47 +0100 Subject: [PATCH] Add a modern CSS spinner --- www/css/app.css | 55 +++++++++++++++++++-- www/index.html | 18 +++---- www/js/app.js | 128 +++++++++++++++++++++--------------------------- 3 files changed, 114 insertions(+), 87 deletions(-) diff --git a/www/css/app.css b/www/css/app.css index 011e984b7..728ec900b 100644 --- a/www/css/app.css +++ b/www/css/app.css @@ -60,11 +60,17 @@ padding-left: 1px !important; } -#searchingForArticles .floating { - position: relative; - z-index: 10; - top: 20px; - height: 0px; +#articleList { + margin-bottom: 12px !important; +} + +#articleListWithHeader { + position: absolute; + top: 0; + left: 5%; + padding-left: 12px; + padding-right: 12px; + background: lightblue; } .articleIFrame { @@ -84,6 +90,45 @@ color : orange; } +.loader { + position: absolute; + margin: 0 auto; + left: 0; + right: 0; + border: 5px solid lightgrey; + -webkit-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; + border-top: 5px solid steelblue; + border-radius: 50%; + width: 50px; + height: 50px; +} + +.status { + position: absolute; + top: 50%; + width: 100%; + z-index: 1; +} + +.message { + position: absolute; + margin: 70px auto 0; + left: 0; + right: 0; + font-size: smaller; + background: whitesmoke; + color: dimgrey; + border: 1px solid gainsboro; + padding: 1px 4px; + width: 200px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + /* Reduce the size of some elements for small screens */ @media (max-width: 768px) { /* Reduce the height of top menu */ diff --git a/www/index.html b/www/index.html index f5a6b39ba..b561afb75 100644 --- a/www/index.html +++ b/www/index.html @@ -44,6 +44,13 @@ + +
@@ -252,17 +256,11 @@

Expert settings

-
+ - -