0x2620/openmedialibrary
1
0
Fork 0
Code Issues 131 Pull requests Releases Wiki Activity

better pre-loading screen

Browse source
This commit is contained in:
Rolux 2016-01-08 09:03:55 +05:30
parent 39a9fc535e
commit 6c0e81ae91
1 changed files with 89 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
static/html/load.html
View file

@ -5,15 +5,56 @@
<title>Open Media Library</title> <title>Open Media Library</title>
<link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" /> <link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" />
<style> <style>
#loading { #logo {
text-align: center; position: absolute;
padding-top: 24px; left: 0;
top: 0;
right: 0;
bottom: 96px;
width: 256px;
height: 256px;
margin: auto;
moz-user-select: none;
ms-user-select: none;
o-user-select: none;
webkit-user-select: none;
} }
#status { #loadingIcon {
position: absolute;
left: 16px;
top: 256px;
right: 0;
bottom: 0;
width: 32px;
height: 32px;
margin: auto;
moz-user-select: none;
ms-user-select: none;
o-user-select: none;
webkit-user-select: none;
}
#error {
position: absolute;
left: 16px;
top: 256px;
right: 0;
bottom: 0;
width: 240px;
height: 32px;
margin: auto;
padding-bottom: 16px; padding-bottom: 16px;
text-align: center;
display: none;
} }
</style> </style>
</head>
<body class="OxThemeOxlight">
<img id="logo" src="../png/oml.png" style="">
<img id="loadingIcon" src="../../../oxjs/min/UI/themes/oxlight/svg/symbolLoading.svg">
<div id="error">Failed to launch Open Media Library</div>
<script> <script>
(function() {
var animationInterval;
function load() { function load() {
var port = document.location.hash.length var port = document.location.hash.length
? document.location.hash.slice(1) ? document.location.hash.slice(1)
@ -30,16 +71,34 @@
setTimeout(load, 500); setTimeout(load, 500);
}; };
}; };
function startAnimation() {
var css, deg = 0,
loadingIcon = document.getElementById('loadingIcon'),
previousTime = +new Date();
animationInterval = setInterval(function() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000;
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css;
loadingIcon.style.transform = css;
}, 83);
}
function stopAnimation() {
clearInterval(animationInterval);
}
startAnimation();
load(); load();
setTimeout(function() { setTimeout(function() {
document.querySelector('#status').innerHTML = 'Failed to start Open Media Library'; stopAnimation();
document.getElementById('loadingIcon').style.display = 'none';
document.getElementById('error').style.display = 'block';
}, 20000); }, 20000);
}());
</script> </script>
</head>
<body class="OxThemeOxlight">
<div id="loading">
<div id="status">Starting Open Media Library</div>
<img src="../png/oml.png">
</div>
</body> </body>
</html> </html>