From 8eb3e40405de45b3b69910d468f8f38f5a6c5b51 Mon Sep 17 00:00:00 2001 From: Xaver Maierhofer Date: Wed, 1 Jun 2016 22:56:26 +0200 Subject: [PATCH] [TASK] Basic loader with info --- html/index.html | 1 + lib/gui.js | 3 +++ scss/main.scss | 1 + scss/modules/_base.scss | 4 ++++ scss/modules/_loader.scss | 23 +++++++++++++++++++++++ 5 files changed, 32 insertions(+) create mode 100644 scss/modules/_loader.scss 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); + } +}