From 0869caa03c10fff3da4145bc3678ff4c8dd5031f Mon Sep 17 00:00:00 2001 From: azivner Date: Mon, 6 Nov 2017 20:13:36 -0500 Subject: [PATCH] added loader to hide ugly loading/repositioning etc. --- public/javascripts/init.js | 16 +++++++++++++++- public/stylesheets/style.css | 4 +++- views/index.ejs | 4 +++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/public/javascripts/init.js b/public/javascripts/init.js index 87ade0fe3..cc74a72bf 100644 --- a/public/javascripts/init.js +++ b/public/javascripts/init.js @@ -89,4 +89,18 @@ $(document).tooltip({ function isElectron() { return window && window.process && window.process.type; -} \ No newline at end of file +} + +$(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; +}); \ No newline at end of file diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 662899995..7df868289 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -107,4 +107,6 @@ div.ui-tooltip { max-width: 600px; max-height: 600px; overflow: auto; -} \ No newline at end of file +} + +#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)}} \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index b7b9f61a8..e08feb48b 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -5,7 +5,9 @@ Trilium -
+
+ +