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;