diff --git a/html/index.html b/html/index.html index 6ffdd66..0af182e 100644 --- a/html/index.html +++ b/html/index.html @@ -13,5 +13,6 @@ +
Lade

Karten & Knoten...
diff --git a/lib/gui.js b/lib/gui.js index a5e476e..d4de7fb 100644 --- a/lib/gui.js +++ b/lib/gui.js @@ -51,6 +51,9 @@ define(["chroma-js", "map", "sidebar", "tabs", "container", "meshstats", }; } + var loader = document.getElementsByClassName("loader")[0]; + loader.classList.add("hidden"); + contentDiv = document.createElement("div"); contentDiv.classList.add("content"); document.body.appendChild(contentDiv); diff --git a/scss/main.scss b/scss/main.scss index 7120008..dedcdca 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -2,6 +2,7 @@ @import 'modules/variables'; @import 'custom/variables'; // Add modules +@import 'modules/loader'; @import 'mixins/shadow'; @import 'mixins/icon-mixin'; @import 'modules/reset'; diff --git a/scss/modules/_base.scss b/scss/modules/_base.scss index 873eb48..64e9d34 100644 --- a/scss/modules/_base.scss +++ b/scss/modules/_base.scss @@ -54,3 +54,7 @@ p { strong { font-weight: bold; } + +.hidden { + display: none; +} diff --git a/scss/modules/_loader.scss b/scss/modules/_loader.scss new file mode 100644 index 0000000..b628d49 --- /dev/null +++ b/scss/modules/_loader.scss @@ -0,0 +1,23 @@ +.loader { + color: $color-primary; + 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 $color-primary; + border-radius: 50%; + display: inline-block; + height: 64px; + margin-top: 10px; + width: 64px; +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } +}