From ded8397dd375b270ef131176ee6280b4adebacbf Mon Sep 17 00:00:00 2001 From: Jia Hao Date: Tue, 19 Jan 2016 20:51:26 +0800 Subject: [PATCH] Add loading spinner --- app/assets/css/main.css | 80 ++++++++++++++++++++++++++++++++++++++++- app/assets/js/index.js | 17 +++++---- app/index.html | 12 ++++--- 3 files changed, 96 insertions(+), 13 deletions(-) diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 29851f1..61b9a7a 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -3,4 +3,82 @@ html, body { height: 100%; margin: 0; padding: 0; -} \ No newline at end of file +} + +.valign-content { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + + +/*spinner*/ + +.loader, +.loader:before, +.loader:after { + border-radius: 50%; +} +.loader:before, +.loader:after { + position: absolute; + content: ''; +} +.loader:before { + width: 5.2em; + height: 10.2em; + background: #ffffff; + border-radius: 10.2em 0 0 10.2em; + top: -0.1em; + left: -0.1em; + -webkit-transform-origin: 5.2em 5.1em; + transform-origin: 5.2em 5.1em; + -webkit-animation: load2 2s infinite ease 1.5s; + animation: load2 2s infinite ease 1.5s; +} +.loader { + font-size: 11px; + text-indent: -99999em; + margin: 55px auto; + position: relative; + width: 10em; + height: 10em; + box-shadow: inset 0 0 0 1em #0dc5c1; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.loader:after { + width: 5.2em; + height: 10.2em; + background: #ffffff; + border-radius: 0 10.2em 10.2em 0; + top: -0.1em; + left: 5.1em; + -webkit-transform-origin: 0px 5.1em; + transform-origin: 0px 5.1em; + -webkit-animation: load2 2s infinite ease; + animation: load2 2s infinite ease; +} +@-webkit-keyframes load2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes load2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/app/assets/js/index.js b/app/assets/js/index.js index 2715cc7..455ae43 100644 --- a/app/assets/js/index.js +++ b/app/assets/js/index.js @@ -22,21 +22,24 @@ ipc.on('params', function (event, message) { if (appArgs.userAgent) { webView.setUserAgent(appArgs.userAgent); } - }); webView.addEventListener('new-window', function (e) { require('shell').openExternal(e.url); }); - // We check for desktop notifications by listening to a title change in the webview - // Not elegant, but it will have to do - if (appArgs.badge) { - webView.addEventListener('did-finish-load', function (e) { + webView.addEventListener('did-finish-load', function (e) { + var loadingContainer = document.getElementById('loading-container'); + loadingContainer.parentNode.removeChild(loadingContainer); + + // We check for desktop notifications by listening to a title change in the webview + // Not elegant, but it will have to do + if (appArgs.badge) { webView.addEventListener('page-title-set', function (event) { ipc.send('notification-message', 'TITLE_CHANGED'); }); - }); - } + } + }); + var webViewDiv = document.getElementById('webViewDiv'); webViewDiv.appendChild(webView); diff --git a/app/index.html b/app/index.html index d4da9f6..f251201 100644 --- a/app/index.html +++ b/app/index.html @@ -1,16 +1,18 @@ - - Nativefier - + + Nativefier + +
+
Loading...
+
+
- -