Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Basic loader with info

Browse Source
This commit is contained in:
Xaver Maierhofer 2016-06-01 22:56:26 +02:00 committed by Xaver Maierhofer
parent 1d074dc90e
commit 8eb3e40405
5 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
html/index.html
View File

@ -13,5 +13,6 @@
<script src="app.js"></script> <script src="app.js"></script>
</head> </head>
<body> <body>
<div class="loader">Lade<br /><span class="spinner"></span><br />Karten & Knoten...</div>
</body> </body>
</html> </html>

3
lib/gui.js
View File

@ -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 = document.createElement("div");
contentDiv.classList.add("content"); contentDiv.classList.add("content");
document.body.appendChild(contentDiv); document.body.appendChild(contentDiv);

1
scss/main.scss
View File

@ -2,6 +2,7 @@
@import 'modules/variables'; @import 'modules/variables';
@import 'custom/variables'; @import 'custom/variables';
// Add modules // Add modules
@import 'modules/loader';
@import 'mixins/shadow'; @import 'mixins/shadow';
@import 'mixins/icon-mixin'; @import 'mixins/icon-mixin';
@import 'modules/reset'; @import 'modules/reset';

4
scss/modules/_base.scss
View File

@ -54,3 +54,7 @@ p {
strong { strong {
font-weight: bold; font-weight: bold;
} }
.hidden {
display: none;
}

23
scss/modules/_loader.scss Normal file
View File

@ -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);
}
}