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
This commit is contained in:
parent
b2c2627d73
commit
8b5bcbfede
|
@ -14,5 +14,15 @@
|
|||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader">
|
||||
<p>
|
||||
Lade<br />
|
||||
<span class="spinner"></span><br />
|
||||
Karte & Knoten...
|
||||
</p>
|
||||
<noscript>
|
||||
<strong>JavaScript required</strong>
|
||||
</noscript>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
10
index.html
10
index.html
|
@ -13,5 +13,15 @@
|
|||
<script src="bower_components/requirejs/require.js" data-main="app"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader">
|
||||
<p>
|
||||
Lade<br/>
|
||||
<span class="spinner"></span><br \>
|
||||
Karte & Knoten...
|
||||
</p>
|
||||
<noscript>
|
||||
<strong>JavaScript required</strong>
|
||||
</noscript>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -28,3 +28,7 @@ h5 {
|
|||
h6 {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
23
scss/_loader.scss
Normal file
23
scss/_loader.scss
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -4,6 +4,7 @@
|
|||
@import '_leaflet';
|
||||
@import '_leaflet.label';
|
||||
@import '_filters';
|
||||
@import '_loader';
|
||||
|
||||
$minscreenwidth: 630pt;
|
||||
$sidebarwidth: 420pt;
|
||||
|
|
Loading…
Reference in a new issue