mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
added loader to hide ugly loading/repositioning etc.
This commit is contained in:
parent
a73afa9ded
commit
0869caa03c
@ -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;
|
||||||
|
});
|
@ -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)}}
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user