Umbra/electron-vite-app
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 6 Wiki Activity

Add splashscreen on app launch

Browse source
This commit is contained in:
TheThomaas 2026-01-26 13:13:34 +01:00
parent 9cacce782b
commit 646aeddae8
2 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/main/index.ts
View file

@ -8,6 +8,22 @@ autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true; autoUpdater.autoInstallOnAppQuit = true;
let mainWindow; let mainWindow;
let splashWindow: BrowserWindow;
function createSplashWindow(): void {
splashWindow = new BrowserWindow({
width: 350,
height: 350,
transparent: true,
frame: false,
alwaysOnTop: true
});
splashWindow.loadFile('src/renderer/splash.html');
splashWindow.center();
splashWindow.setSkipTaskbar(true);
splashWindow.show();
}
function createWindow(): void { function createWindow(): void {
// Create the browser window. // Create the browser window.
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
@ -22,8 +38,18 @@ function createWindow(): void {
} }
}) })
createSplashWindow();
mainWindow.on('ready-to-show', () => { mainWindow.on('ready-to-show', () => {
mainWindow.show() if (is.dev) {
setTimeout((): void => {
splashWindow.close();
mainWindow.show();
}, 2000);
} else {
splashWindow.close();
mainWindow.show();
}
}) })
mainWindow.webContents.setWindowOpenHandler((details) => { mainWindow.webContents.setWindowOpenHandler((details) => {

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

@ -0,0 +1,33 @@
<!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 id="root">
<img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
<style>
#root {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
height: 350px;
width: 350px;
}
.logo {
-webkit-user-drag: none;
filter: drop-shadow(0 0 1.6em #6988e6aa);
}
</style>
</body>
</html>