gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases 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

14
public/javascripts/init.js
View File

@ -90,3 +90,17 @@ $(document).tooltip({
function isElectron() { function isElectron() {
return window && window.process && window.process.type; 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;
});

2
public/stylesheets/style.css
View File

@ -108,3 +108,5 @@ div.ui-tooltip {
max-height: 600px; max-height: 600px;
overflow: auto; 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> <title>Trilium</title>
</head> </head>
<body> <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" class="hide-toggle">
<div id="header-title"> <div id="header-title">
Trilium Trilium