Skip to content
Snippets Groups Projects
Commit 253c5a56 authored by Eugen Ciur's avatar Eugen Ciur
Browse files

Add application loader indicator.

parent 6cd0b094
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/app.js
+ 19
− 0
View file @ 253c5a56
...@@ -4,10 +4,29 @@ import loadInitializers from 'ember-load-initializers'; ...@@ -4,10 +4,29 @@ import loadInitializers from 'ember-load-initializers';
import config from 'papermerge/config/environment'; import config from 'papermerge/config/environment';
import 'bootstrap'; import 'bootstrap';
export default class App extends Application { export default class App extends Application {
modulePrefix = config.modulePrefix; modulePrefix = config.modulePrefix;
podModulePrefix = config.podModulePrefix; podModulePrefix = config.podModulePrefix;
Resolver = Resolver; Resolver = Resolver;
ready() {
/*
Hide rotating spinner when application finished loading and it is ready
Initial index.html has as background a rotating spinner which
indicates that application is loading:
<div class="loading">
<div class="loader"></div>
</div>
*/
let divs = document.getElementsByClassName('loading');
if (divs.length > 0) {
divs[0].style.display = 'None';
}
}
} }
loadInitializers(App, config.modulePrefix); loadInitializers(App, config.modulePrefix);
app/index.html
+ 57
− 0
View file @ 253c5a56
...@@ -12,10 +12,67 @@ ...@@ -12,10 +12,67 @@
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css"> <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/papermerge.css"> <link integrity="" rel="stylesheet" href="{{rootURL}}assets/papermerge.css">
<link rel="shortcut icon" type="image/png" href="{{rootURL}}assets/favicon.ico"/> <link rel="shortcut icon" type="image/png" href="{{rootURL}}assets/favicon.ico"/>
<style>
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
background: #e9ecef;
}
.loader {
left: 50%;
margin-left: -4em;
font-size: 10px;
border-top: .8em solid rgba(218, 219, 223, 0.3);
border-right: .8em solid rgba(218, 219, 223, 0.3);
border-bottom: .8em solid rgba(218, 219, 223, 0.3);
border-left: .8em solid rgba(75, 179, 241, 1);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%;
width: 8em;
height: 8em;
display: block;
position: absolute;
top: 50%;
margin-top: -4.05em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
{{content-for "head-footer"}} {{content-for "head-footer"}}
</head> </head>
<body> <body>
<div class="loading">
<div class="loader"></div>
</div>
{{content-for "body"}} {{content-for "body"}}
<script src="{{rootURL}}assets/vendor.js"></script> <script src="{{rootURL}}assets/vendor.js"></script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment