Umbra/umbra-electron
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add basic splash screen

Browse source
This commit is contained in:
TheThomaas 2024-12-08 21:24:42 +01:00
parent c0d0d8563b
commit 8b29c3a663
2 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/main/index.ts
View file

@ -4,6 +4,7 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset' import icon from '../../resources/icon.png?asset'
let mainWindow: BrowserWindow; let mainWindow: BrowserWindow;
let splash: BrowserWindow;
let tray: Tray; let tray: Tray;
function createWindow(): void { function createWindow(): void {
@ -20,8 +21,21 @@ function createWindow(): void {
} }
}) })
// TODO Create splash screen
splash = new BrowserWindow({
width: 500,
height: 300,
transparent: true,
frame: false,
alwaysOnTop: true
});
splash.loadFile('src/renderer/splash.html');
splash.center();
splash.show();
// TODO show window according to the app settings // TODO show window according to the app settings
mainWindow.on('ready-to-show', () => { mainWindow.on('ready-to-show', () => {
splash.close();
mainWindow.show() mainWindow.show()
}) })

70
src/renderer/splash.html Normal file
View file

@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Splash</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
</head>
<body>
<h3>Application Is Starting...</h3>
<div class="loader"></div>
<style>
body {
background-color: #f9f9fa;
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.loader {
border: 5px solid rgba(18, 65, 145, 255);
border-radius: 50%;
border-top: 5px solid #ffffff;
width: 40px;
height: 40px;
-webkit-animation: spin 1s linear infinite;
/* Safari */
animation: spin 1s linear infinite;
margin: auto;
left: 0;
right: 0;
top: 0px;
bottom: 0;
position: fixed;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.center {
border: none !important;
text-align: center;
}
</style>
</body>
</html>