zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-12-27 01:34:05 +08:00
Code Issues Projects Releases Packages Wiki Activity

added loader to hide ugly loading/repositioning etc.

Browse source
This commit is contained in:
azivner 2017-11-06 20:13:36 -05:00
parent a73afa9ded
commit 0869caa03c
3 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public/javascripts/init.js
View file

@ -89,4 +89,18 @@ $(document).tooltip({
function isElectron() {
return window && window.process && window.process.type;
}
}
$(document).ready(() => {
$("#container").show();
// Get a reference to the loader's div
const loaderDiv = document.getElementById("loader-wrapper");
// When the transition ends remove loader's div from display
// so that we can access the map with gestures or clicks
loaderDiv.addEventListener("transitionend", function(){
loaderDiv.style.display = "none";
}, true);
// Kick off the CSS transition
loaderDiv.style.opacity = 0.0;
});

4
public/stylesheets/style.css
View file

@ -107,4 +107,6 @@ div.ui-tooltip {
max-width: 600px;
max-height: 600px;
overflow: auto;
}
}
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

4
views/index.ejs
View file

@ -5,7 +5,9 @@
<title>Trilium</title>
</head>
<body>
<div id="container">
<div id="loader-wrapper"><div id="loader"></div></div>
<div id="container" style="display: none;">
<div id="header" class="hide-toggle">
<div id="header-title">
Trilium