From 8b5bcbfede181689f5ed43110c0bf0616eed9ad5 Mon Sep 17 00:00:00 2001 From: H4ndl3 Date: Mon, 13 Mar 2017 22:54:36 +0100 Subject: [PATCH] add loading animation Create _loader.scss Update main.scss Update _base.scss Update gui.js Update index.html removed trailing spaces removed trailing white spaces for real --- html/index.html | 10 ++++++++++ index.html | 10 ++++++++++ lib/gui.js | 3 +++ scss/_base.scss | 4 ++++ scss/_loader.scss | 23 +++++++++++++++++++++++ scss/main.scss | 1 + 6 files changed, 51 insertions(+) create mode 100644 scss/_loader.scss diff --git a/html/index.html b/html/index.html index fc4ff6e..6f5c4c7 100644 --- a/html/index.html +++ b/html/index.html @@ -14,5 +14,15 @@ +
+

+ Lade
+
+ Karte & Knoten... +

+ +
diff --git a/index.html b/index.html index fcbf858..76dfc6e 100644 --- a/index.html +++ b/index.html @@ -13,5 +13,15 @@ +
+

+ Lade
+
+ Karte & Knoten... +

+ +
diff --git a/lib/gui.js b/lib/gui.js index 4ce989d..4e14c50 100644 --- a/lib/gui.js +++ b/lib/gui.js @@ -48,6 +48,9 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist, } } + var loader = document.getElementsByClassName("loader")[0] + loader.classList.add("hide") + contentDiv = document.createElement("div") contentDiv.classList.add("content") document.body.appendChild(contentDiv) diff --git a/scss/_base.scss b/scss/_base.scss index 52f18c3..21ca3ff 100644 --- a/scss/_base.scss +++ b/scss/_base.scss @@ -28,3 +28,7 @@ h5 { h6 { font-size: 0.67em; } + +.hide { + display: none; +} diff --git a/scss/_loader.scss b/scss/_loader.scss new file mode 100644 index 0000000..d56c27e --- /dev/null +++ b/scss/_loader.scss @@ -0,0 +1,23 @@ +.loader { + color: #000000; + font-size: 1.8em; + line-height: 2; + margin: 30vh auto; + text-align: center; +} + +.spinner { + animation: .6s spinner ease-in-out infinite alternate; + border-bottom: 2px solid #000000; + border-radius: 50%; + display: inline-block; + height: 64px; + margin-top: 10px; + width: 64px; +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} diff --git a/scss/main.scss b/scss/main.scss index 34fd594..47cbed9 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -4,6 +4,7 @@ @import '_leaflet'; @import '_leaflet.label'; @import '_filters'; +@import '_loader'; $minscreenwidth: 630pt; $sidebarwidth: 420pt;