octoleo
/
nativefier
mirror of https://github.com/Llewellynvdm/nativefier.git
2
2
Fork 0
Code Issues Releases Activity

Add loading spinner

This commit is contained in:
Jia Hao 2016-01-19 20:51:26 +08:00
parent 8a7219eba8
commit ded8397dd3
3 changed files with 96 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/assets/css/main.css
View File

@ -3,4 +3,82 @@ html, body {
height: 100%;
margin: 0;
padding: 0;
}
}
.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);
}
}

17
app/assets/js/index.js
View File

@ -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);

12
app/index.html
View File

@ -1,16 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nativefier</title>
<link rel="stylesheet" href="assets/css/main.css">
<meta charset="UTF-8">
<title>Nativefier</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div id="loading-container" class="valign-content">
<div class="loader">Loading...</div>
</div>
<div id="webViewDiv" style="width:100%; height:100%"></div>
<script src="assets/js/index.js"></script>
</body>
</html>